`

JS第三篇——封装一个下拉复选框

 
阅读更多

 

[我有废话要说]
     写了一天半，终于做出了一个复选下拉框的JS控件~
     昨天晚上装软件装到11点，接着写JS写到1点，样式始终不对，早上到公司用默认的FF一开就正确了……又是浏览器问题，定位了就好搞了，今早又花了1个多小时，终于圆满了。

[正文——封装一个复选输入框的JS文件]

  需求：

      1提供公用的js文件，传入input表单元素和下拉复选框中的key-value对，将该input表单实现下拉复选框。

 

/**//**
 * Creat date 2011-11-10
 * Creat by zhuoyueping
 *支持input表单的下拉复选框。
 *使用方法：
 * (1)调用js函数：setSelectBox(textItem, myArray);
 *     参数说明：
 *        textItem：input表单元素
 *        myArray：二维数组，存放下拉框中的key-value对。
 * (2)使用实例：

<html>
<head>
    <title>my test</title>
    <script type="text/javascript" src="comboSelectBox.js"></script>  
    <script type="text/javascript">

        function testSelectBox(textItem) {
            var myArray = new Array();
            myArray['one'] = 1;
            myArray['two'] = 2;
            myArray['three'] = 3;
            myArray['4'] = 4;
            myArray['5'] = 5;
            myArray['6'] = 6;
            myArray['7'] = 7;
            myArray['8'] = 8;
            setSelectBox(textItem, myArray);
        }
    </script>
</head>
<body>
<form id="mainForm">
实例
   <br>在此控件下方显示下拉复选框
    <input id="input" onclick="testSelectBox(this);" style="height: 20px; width: 100px;" />
    <input type="button" id="Text1"  style="height: 20px; width: 100px;" />
    </form>
</body>
</html>

 */

//创建用于显示隐藏的tableDiv
var div;
function showDiv() {
    div.style.display = "block";
}
function hideDiv() {
    div.style.display = "none";
}

/*
 *根据复选框中的数值，更新input表单的显示。
 *当下拉框中每个checkbox被点击后，触发刚方法。
 */
function updateValue() {
    var value = "";
    var array = new Array();
    var form = document.getElementById("mainForm");
    var len = form.c.length;
    for (var i = 0; i < len; i++) {
        if (form.c[i].checked) {
            var v = form.c[i].value;
            array.push(v);
            value = value + v + ";";
        }
    }
    form.input.value = value;
}
function setSelectBox(textItem, myArray) {
    //复选下拉框首次创建，并显示
    if (div == undefined) {
        var itemTop = textItem.offsetTop;    //控件的定位点top
        var itemHeight = textItem.clientHeight;    //控件本身的height
        var itemLeft = textItem.offsetLeft;    //控件的定位点left

        var top = itemTop + itemHeight + 5;

        div = document.createElement("div");
        div.onmouseover = showDiv;
        div.onmouseout = hideDiv;
        //下拉层的位置、下拉滚动等样式
        var trs = '<div id="tableDiv" style="position:absolute;text-align: center;OVERFLOW: auto; SCROLLBAR-BASE-COLOR: #cccccc; HEIGHT: 80px;SCROLLBAR-FACE-COLOR: #ffffff;top:' + top + '; left:' + itemLeft + ';WIDTH:100px;Z-INDEX: 1;SCROLLBAR-SHADOW-COLOR:#cccccc;SCROLLBAR-ARROW-COLOR: #cccccc;SCROLLBAR-3DLIGHT-COLOR: #cccccc; background-color: #ffffff; border: 1px solid black"><table>';
        trs += '<table>';
        //初始化下拉的选项
        for (var key in myArray) {
            trs += '<tr><td nowrap height="28"><input type="checkbox" name="c" value="' + key + '" onchange="updateValue()">' + myArray[key] + '</td></tr>';
        }
        trs += '</table></div>';
        div.innerHTML = trs;
        var beforeNode = textItem.nextSibling;
//      textItem.parentNode.insertBefore(div, beforeNode); 使用该方法，会使input后面的控件位置联动。
        textItem.parentNode.appendChild(div);
    }
    else {
        //该复选下拉的层已经创建了，那么再次点击input表单的时候，显示
        showDiv();
    }
}

妖孽问题总结：

1.myArray是个二位数组，key是one，value是1，可以通过上面代码的遍历取出。

            var myArray = new Array();
            myArray['one'] = 1;

2.先不是用得appendChild的方法，是想用document.write方法，这个方法在input的onclick方法后被调用，却把界面的其他内容都清掉了，只有我自己write里面的html还在。。

3.div中的绝对的位置，需要和top、left这些一起用。

position:absolute

4.最妖孽的问题就是jar包得版本，还有浏览器的支持。

   IE不支持div.setAttribute、table.innerHTML方法。。于是我只有在div层上再加一个div层，用innerHTML来写内部div的样式和table。

    下一节，用jquery来优化该JS，从此不再考虑浏览器，生活将更美好起来~~

分享到：
| JS第二篇——自动运行JS方法&Autocomplete
评论
2 楼 qiwb 2013-06-21  
运行效果图呢？
1 楼 muqingren 2012-08-24  
 
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics