• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用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="nbsplabel 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>

    下载此文件
    您可能感兴趣的文章:
    • Asp.net Mvc 身份验证、异常处理、权限验证(拦截器)实现代码
    • asp.net中3种验证码示例(实现代码)(数字,数字字母混和,汉字)
    • 验证用户必选CheckBox控件与自定义验证javascript代码
    上一篇:锁定行头和列头的表格组件
    下一篇:用htc实现验证模块
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    用htc实现CHECKBOX控件 用,htc,实现,CHECKBOX,控件,