用htc实现CHECKBOX控件

admin htc

2023-12-08 0 954

复制代码代码如下:/* 描述:CHECKBOX控件版本:1.1 备注:CHECKBOX控件背后跟随的文字是获取CHECKBOX对象的htc_myLabel来显示的更新添加indeter属性,用来增加不确定的选择 */ <public:component> <public:attachevent=\”oncontentready\”onevent=\”fnInit()\”/> <public:attachevent=\”onpropertychange\”onevent=\”fnPropertychange()\”/> <scriptlanguage=\”Javascript\”> varcheckBoxImg=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\”; functionpreLoad(path,obj){ for(iinobj){ this[i]=newImage(); this[i].src=path+obj[i]; } returnthis; } preb=newpreLoad(\”images/\”,ImageArray); functionfnInit(){ varo=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=\”&nbsp<labelstyle=\’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()}); } } functionfnPropertychange(){ varo=element; switch(event.propertyName.toString().toLowerCase()){ case\”checked\”: Baction(\”up\”); break; } } functionfnClick(){ varo=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; } } functionBaction(action){ varo=element; if(o.type==\”checkbox\”){ if(o.disabled)return; if(action==\”up\”||action==\”over\”){ if(o.indeterminate){ checkBoxImg.src=preb[\”checkbox_indeter_over\”].src; } elseif(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; } elseif(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; } elseif(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> <metaname=\”Generator\”content=\”EditPlus\”> <metaname=\”Author\”content=\”FlashSoft\”> <metaname=\”Keywords\”content=\”\”> <metaname=\”Description\”content=\”FlashSoft\”> <metahttp-equiv=\”Content-Type\”content=\”text/html;charset=utf-8\”> <styletype=\”Text/Css\”> input.checkbox{ behavior:url(\”behaviors/checkbox.htc\”);cursor:hand; } </style> </head> <body> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”音乐\”checked> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”体育\”disabled> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”新闻\”> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”不确定属性1\”indeter=\”true\”checked> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”不确定属性2\”indeter=\”true\”disabled> <inputname=\”chk1\”type=\”checkbox\”class=\”checkbox\”htc_myLabel=\”不确定属性3\”indeter=\”true\”> </body> </html> 下载此文件