网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 用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" htc_myLabel="音乐" checked>
    <input name="chk1" type="checkbox" htc_myLabel="体育" disabled>
    <input name="chk1" type="checkbox" htc_myLabel="新闻">
    <input name="chk1" type="checkbox" htc_myLabel="不确定属性1" indeter="true" checked>
    <input name="chk1" type="checkbox" htc_myLabel="不确定属性2" indeter="true" disabled>
    <input name="chk1" type="checkbox" htc_myLabel="不确定属性3" indeter="true">
    </body>
    </html>
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 3:09:35