用htc实现CHECKBOX控件
人气:0想了解用htc实现CHECKBOX控件的相关内容吗，在本文为您仔细讲解的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：用htc实现CHECKBOX控件，下面大家一起来学习吧。
复制代码 代码如下:
/*
描述: CHECKBOX控件
版本: 1.1
备注: CHECKBOX控件背后跟随的文字
是获取CHECKBOX对象的htc_myLabel来显示的
更新添加indeter属性,用来增加不确定的选择
*/
<public:component>
<public:attach event="oncontentready" onevent="fnInit()" />
<public:attach event="onpropertychange" onevent="fnPropertychange()" />
<script language="Javascript">
var checkBoxImg=window.document.createElement("IMG");
ImageArray=[];
ImageArray["checkbox_false"]="checkbox_false.gif";
ImageArray["checkbox_false_down"]="checkbox_false_down.gif";
ImageArray["checkbox_false_over"]="checkbox_false_over.gif";
ImageArray["checkbox_true"]="checkbox_true.gif";
ImageArray["checkbox_true_down"]="checkbox_true_down.gif";
ImageArray["checkbox_true_over"]="checkbox_true_over.gif";
ImageArray["checkbox_indeter"]="checkbox_indeter.gif";
ImageArray["checkbox_indeter_down"]="checkbox_indeter_down.gif";
ImageArray["checkbox_indeter_over"]="checkbox_indeter_over.gif";
function preLoad(path,obj){
for(i in obj){
this[i]=new Image();
this[i].src=path+obj[i];
}
return this;
}
preb=new preLoad("images/",ImageArray);
function fnInit(){
var o=element;
if(o.type=="checkbox"){
var _table=window.document.createElement("TABLE");
_table.cellSpacing="0px";
_table.cellPadding="0px";
_table.border="0px";
if(o.disabled){
_table.style.filter="alpha(Opacity=50)";
}
else{
_table.style.filter="";
}
_table.style.display="inline";
var _tr=_table.insertRow();
var _td=_tr.insertCell();
if (o.checked){
checkBoxImg.src=preb["checkbox_true"].src;
}
else{
checkBoxImg.src=preb["checkbox_false"].src;
}
if(o.indeter=="true"){
o.indeterminate="true";
checkBoxImg.src=preb["checkbox_indeter"].src;
}
_td.appendChild(checkBoxImg);
_td=_tr.insertCell();
_td.style.verticalAlign="bottom";
if(o.htc_myLabel){
_td.innerHTML=" <label style='cursor: hand'>"+o.htc_myLabel+"</label>";
}
o.insertAdjacentElement("afterEnd",_table);
o.style.display="none";
_table.attachEvent("onmouseover",function(){Baction("over")});
_table.attachEvent("onmouseout",function(){Baction("out")});
_table.attachEvent("onmousedown",function(){Baction("down")});
_table.attachEvent("onmouseup",function(){Baction("up")});
_table.attachEvent("onclick",function(){fnClick()});
}
}
function fnPropertychange(){
var o=element;
switch(event.propertyName.toString().toLowerCase()){
case "checked":
Baction("up");
break;
}
}
function fnClick(){
var o=element;
if(o.type=="checkbox"){
if(o.disabled)return;
if(o.checked){
checkBoxImg.src=preb["checkbox_false"].src;
}
else{
checkBoxImg.src=preb["checkbox_true"].src;
}
o.checked=!o.checked;
}
}
function Baction(action){
var o=element;
if(o.type=="checkbox"){
if(o.disabled)return;
if(action=="up"||action=="over"){
if(o.indeterminate){
checkBoxImg.src=preb["checkbox_indeter_over"].src;
}
else if(o.checked){
checkBoxImg.src=preb["checkbox_true_over"].src;
}
else{
checkBoxImg.src=preb["checkbox_false_over"].src;
}
}
if(action=="out"){
if(o.indeterminate){
checkBoxImg.src=preb["checkbox_indeter"].src;
}
else if(o.checked){
checkBoxImg.src=preb["checkbox_true"].src;
}
else{
checkBoxImg.src=preb["checkbox_false"].src;
}
}
if(action=="down"){
if(o.indeterminate){
checkBoxImg.src=preb["checkbox_indeter_down"].src;
}
else if(o.checked){
checkBoxImg.src=preb["checkbox_true_down"].src;
}
else{
checkBoxImg.src=preb["checkbox_false_down"].src;
}
o.indeterminate=false;
}
}
}
</script>
</public:component>
测试例子:
复制代码 代码如下:
<html>
<head>
<title> 新文档 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="FlashSoft">
<meta name="Keywords" content="">
<meta name="Description" content="FlashSoft">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="Text/Css">
input.checkbox{
behavior:url("behaviors/checkbox.htc");cursor: hand;
}
</style>
</head>
<body>
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="音乐" checked>
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="体育" disabled>
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="新闻">
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性1" indeter="true" checked>
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性2" indeter="true" disabled>
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性3" indeter="true">
</body>
</html>
下载此文件
加载全部内容