[我有废话要说]
写了一天半，终于做出了一个复选下拉框的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，从此不再考虑浏览器，生活将更美好起来~~
分享到：
相关推荐
在网页开发中，有下拉菜单的复选框是一种常见的交互元素，它允许用户在一组选项中进行多项选择，同时这些选项又能隐藏在一个下拉菜单内以节省空间。本示例涉及的技术点主要包括HTML基础、CSS样式以及JavaScript编程...
在这个“复选框封装类”资源中，开发者提供了一个自绘的复选框类，以增强其视觉效果和定制性。下面将详细介绍这个封装类以及相关的编程知识。 1. **自绘控件**：在Windows API或MFC（Microsoft Foundation Classes...
在HTML中，`<input type="checkbox">` 用于创建一个复选框，用户可以勾选或取消勾选。复选框通常与`<label>`标签一起使用，提供更好的用户体验，使用户可以通过点击标签文本来改变复选框的状态。 要将树形结构与复...
本主题将深入探讨如何使用jQuery来实现一个功能丰富的下拉复选框，这种组件常用于网页表单，允许用户多选选项。 首先，下拉复选框是一种增强传统HTML下拉列表用户体验的组件。传统的HTML `<select>` 元素只允许用户...
安卓Android源码——封装的一个tabhost框架.zip
对于复选框，我们可以继承QStyledItemDelegate，并重写`paint()`方法，以便在绘制项时添加一个复选框。同时，我们也需要覆盖`editorEvent()`方法，以响应用户的点击事件并更新模型的数据。为了确保复选框的状态与...
在EXTJS这个强大的JavaScript框架中，用户界面的交互设计是其一大亮点，其中包括各种各样的控件，如复选框（checkboxes）和全选功能。然而，在实际应用中，我们可能会遇到一个问题：当实现全选功能后，如果尝试取消...
【标题】"安卓Android源码——封装的一个tabhost框架"主要涵盖了Android开发中关于TabHost组件的使用和封装技巧。TabHost是Android SDK提供的一种用于创建多标签界面的组件，常用于实现应用内的导航功能。在传统的...
1. **独立模式**：每个复选框独立，互不影响。勾选父节点不会自动改变子节点的状态，反之亦然。 2. **半关联模式**：勾选父节点会自动勾选所有子节点，但子节点的改变不会影响父节点。这种模式在处理部分选择时很...
本项目通过结合JavaScript和CSS技术，实现了一个具有展缩功能和选中数显示的树形复选框组件。下面我们将深入探讨这个组件的核心知识点。 首先，`Checkbox`在HTML中是`<input type="checkbox">`标签，用于创建一个...
本篇文章将详细探讨如何在MFC中实现树形控件与复选框功能，使得父节点的选择能够影响其所有子节点的选中状态。 首先，我们需要了解MFC的树形控件（CTreeCtrl）基本用法。CTreeCtrl是MFC封装的Windows控件，用于显示...
首先，我们要知道，标准的ListBox控件并不直接支持复选框，因此我们需要使用一个特殊的控件——CCheckListBox类。这个类是MFC对Windows API中的CheckListBox控件的封装，它允许我们在列表项前添加复选框。 创建...
在这个例子中，我们创建了三个复选框，每个都有一个唯一的id（option1、option2和option3），并且它们都属于同一个命名组"options"。这样，当用户在提交表单时，服务器就能获取到被选中的选项。 在实际应用中，多选...
这个功能使得用户能够在文本框中通过点击触发一个下拉菜单，然后在菜单中选择多个复选框选项，这些选项会自动显示在文本框内，并且可以选择不同的分隔符来区分各个选定的值。以下是对这个主题的详细解析： 首先，`...
本文将深入探讨一个特定的UI组件——“带复选框的多选树控件”，该控件支持XML作为数据源，这使得数据管理和呈现更加灵活。 首先，让我们了解“带复选框的树控件”是什么。在Windows应用程序中，树控件是一种常见的...
网页模板设计中，仿苹果风格的CheckBox复选框代码是一个重要的设计元素，它能够为网站带来独特的视觉体验和一致的用户交互。苹果公司的设计语言以其简洁、优雅和易用性著称，许多开发者和设计师都会尝试在自己的项目...
1. **自定义控件**：由于PowerBuilder的标准控件库可能不直接提供带复选框的树形控件，开发者需要通过自定义控件或者使用第三方库来实现。这可能涉及到创建新的窗口对象，编写自定义的事件处理函数，以及对控件外观...
这个“基于jQuery实现的全选、反选复选框插件源码例子”是一个很好的学习资源，可以帮助开发者理解如何利用jQuery来操控DOM（Document Object Model）中的复选框，并实现全选与反选的功能。 首先，我们要了解jQuery...
标题中的“彩色图形复选框”指的是在VB（Visual Basic）环境中使用的一种特殊类型的复选框控件，它能够展示彩色的图形效果，而非传统的黑白或单色样式。这种控件通常用于提升用户界面的视觉吸引力，使得软件更加美观...