使用说明
即仅需把附件中的 js 文件和 css 文件引用到网页里，如：
<script type="text/javascript" src="divmenu.js"></script>
<link href="divmenu.css" rel="stylesheet" type="text/css" />
在线演示
下载源码打包
其中 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 宽，使用时请注意。
欢迎试用，并提出意见建议，共用探讨改进。
如对本文有疑问，
点击进行留言回复！！
相关文章:
-
-
-
-
-
-
-
-
-
-
MVC模式
MVC模式一、MVC介绍二、创建Model包public interface GetModel { voi...
[阅读全文]
-
我要评论
网友评论