代码如下:
/*
描述:        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=\”&nbsp<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>

1. 本站所有文章及资源来源于用户上传和网络,如有侵权请联系站长处理!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律,否则后果自负!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

中国站长社区 » 用htc实现CHECKBOX控件

发表评论

发布资源,赚取佣金,随时提现

立即发布 了解详情