js 浮动层菜单收藏


Posted in Javascript onJanuary 16, 2009

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

<script type="text/javascript" src="DivMenu.js"></script> 
<link href="DivMenu.css" rel="stylesheet" type="text/css" />

在线演示 http://img.3water.com/online/DivMenu/DivMenu.htm
下载源码打包 http://img.3water.com/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 宽,使用时请注意。
欢迎试用,并提出意见建议,共用探讨改进。
Javascript 相关文章推荐
jQuery代码优化 遍历篇
Nov 01 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
jquery中常用的SET和GET
Jan 13 #Javascript
JavaScript 私有成员分析
Jan 13 #Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 #Javascript
JavaScript delete操作符应用实例
Jan 13 #Javascript
在网页里看flash的trace数据的js类
Jan 10 #Javascript
捕获关闭窗口的脚本
Jan 10 #Javascript
javascript 自动转到命名锚记
Jan 10 #Javascript
You might like
PHP类中Static方法效率测试代码
2010/10/17 PHP
php 获取全局变量的代码
2011/04/21 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jquery 学习笔记一
2010/04/07 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python实现Dijkstra算法
2018/10/17 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python实现微信防撤回神器
2019/04/29 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python文件编写好后如何实践
2020/07/07 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
会话Bean的种类
2013/11/07 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
个人授权委托书格式
2014/08/30 职场文书
个人收入证明模板
2014/09/18 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL