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 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
javascript每日必学之循环
Feb 19 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
JavaScript 实现继承的几种方式
Feb 19 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页面中文乱码分析
2013/10/29 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python 支付整合开发包的实现
2019/01/23 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
2014年科研工作总结
2014/12/03 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
入党函调证明材料
2015/06/19 职场文书
《圆的面积》教学反思
2016/02/19 职场文书