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实现div浮动层跟随页面滚动效果
Feb 11 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
bootstrap轮播图示例代码分享
May 17 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP 读取文件的正确方法
2009/04/29 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
js DOM模型操作
2009/12/28 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Django中几种重定向方法
2015/04/28 Python
python在非root权限下的安装方法
2018/01/23 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
如何理解python对象
2020/06/21 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
舞蹈教育学专业推荐信
2013/11/27 职场文书
护士进修自我鉴定
2014/02/07 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
行政处罚告知书
2015/07/01 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
MySQL分库分表详情
2021/09/25 MySQL
索尼ICF-5900W收音机测评
2022/04/24 无线电
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle