js 浮动层菜单收藏

使用说明
即仅需把附件中的 JS 文件和 CSS 文件引用到网页里，如：

在线演示 http://img.jb51.net/online/DivMenu/DivMenu.htm
下载源码打包 http://img.jb51.net/online/DivMenu/DivMenu.zip
其中 DivMenu.js 是经 Javascript compressor 压缩的精简版本，供生成实际使用。DivMenu_develop.js 是带详细注释的开发版，供学习研究。使用时可以参考 DivMenu.css 文件中的注释，自行修改样式定义。
JavaScript 程序已经实现免打扰（unobtrusive），即引用此 JS 文件的 HTML 文件无需任何其它调整。但还未实现完全匿名（anonymous），意思是此程序仍然创建了全局变量和若干网页节点，已经尽量做到少增加全局变量和节点，但使用时仍请注意变量命名冲突。此程序仅增加一个全局变量“DivMenu”，增加的网页节点比较多，对应替换掉的每个 SELECT 节点增加两个节点，名字分别是 SELECT 节点的 name 值加“_a”后缀和“_div”后缀，例如原有某 SELECT 节点的名字是“menu”，则新增的两个节点名字是“menu_a”和“menu_div”。
功能说明
多选菜单不转换，多选菜单中的提示文字只能用 disabled="disabled" 来实现了。 若要选择多个，请住 Ctrl 键再选择 多选1 多选2 多选3 多选4 多选5 放一个多选菜单，用来演示多选菜单不会被替换，以及在 IE6 中浮动层可以正常显示在其它 SELECT 以上了。
以上是个实用的范例，几组经典的 SELECT 选择菜单，第一个是复杂带分组的，提示文字用 disabled="disabled" 的第一个 option 实现，后一个是简单的，提示文字用的是没有 value 属性的那个 option。实践发现 FF 可以正常处理 disabled="disabled" 或者仅 disabled 的 option，让它可以不可选的状态，而 IE 则无视任何disabled="disabled" 和 disabled，所以估计通常 IE 里的菜单想用提示文字都会用没有 value 属性或者 value=""的那个 option。可以看它的源码就是原来的 SELECT，不需要任何改动。
基本思路是把文档中原有的 SELECT 菜单转换成隐藏型的 INPUT 表单项，用 A 元素来做菜单的提示文字条和选项条，用 DIV 层做菜单，各个选项也用 A 元素来替代，点击时把值赋给隐藏型的 INPUT 表单项。
主要功能或限制包括：
所有使用习惯遵循传统的 SELECT 菜单。
只有单选的 SELECT 菜单会被替换，多选菜单维持不变，因为通常多选菜单也不用浮动层菜单来替代。
支持各种 SELECT 元素的特性，如把 disabled 的或者没有 value 的 option 作为提示文字条；用 optgroup 分组的选项也会在新菜单中分组。并且专门针对 IE 6 中 SELECT 挡住 DIV 层的 BUG 进行了修正。
支持默认选中项。
几乎支持普通菜单的所有功能，但是不支持额外的交互功能，如 JavaScript 实时创建的 Option 选项、联动选项等，比如选一个城市区县会相应变化这类的功能是不支持的。
全部样式都用 CSS 定义，字号使用相对大小，无需改动即可适应多数网页。
菜单位置和尺寸均设置成灵活的，可适应任意的网页排版和布局。做的时候考虑的是要能在替代的 A 元素中显示时，放得下最宽的选项文字，因而没有直接取原有 SELECT 框的宽度。因此菜单尺寸可能比原有的 SELECT 宽，使用时请注意。
欢迎试用，并提出意见建议，共用探讨改进。

最新评论