JS第三篇——封装一个上拉复选框
日期：2014-05-16 浏览次数：20435 次
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包得版本，还有浏览器的支持。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
