js 浮动层菜单收藏

所属分类: 网络编程 / JavaScript 阅读数: 842
收藏 0 赞 0 分享
使用说明
即仅需把附件中的 JS 文件和 CSS 文件引用到网页里,如:
复制代码 代码如下:

<script type="text/javascript" src="DivMenu.js"></script>
<link href="DivMenu.css" rel="stylesheet" type="text/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 宽,使用时请注意。
欢迎试用,并提出意见建议,共用探讨改进。
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多