js 浮动层菜单收藏

使用说明
即仅需把附件中的 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 宽，使用时请注意。
欢迎试用，并提出意见建议，共用探讨改进。

赞 (0)

相关推荐

  • JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

  • javascript实现网站加入收藏功能

    本文为大家分享了三段javascript实现网站加入收藏功能的代码,具体内容如下 第一种情况:可兼容所有浏览器的加入收藏代码,原理:根据获取用户navigator.userAgent.toLowerCase()信息来判断浏览器,根据浏览器是否支持加入收藏js命令,如果可以自动收藏否则就提示ctrl+D手动收藏了. 代码如下: function addFavorite2() { var url = window.location; var title = document.title; var u

  • JS 加入收藏夹的代码(主流浏览器通用)

    所有浏览器通用的js添加收藏夹代码 复制代码 代码如下: <script> function addfavorite() { if (document.all) { window.external.addFavorite('http://www.XXX.com','XXX'); } else if (window.sidebar) { window.sidebar.addPanel('XXX', 'http://www.XXX.com', ""); } } </scr

  • javascript 设为首页与加入收藏兼容多浏览器代码

    代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script language="javascript" type="text/javascript"> function AddFavorite(sURL, sTi

  • 收藏的js表单验证控制代码大全第1/3页

    关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制  2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js

  • 设为首页与加入收藏的JS代码(多浏览器支持)

    最新的支持IE.firefox.chrome有提示信息的代码: <script type="text/javascript"> //设为首页 www.jb51.net function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try{ netscape.security.P

  • javascript 加入收藏、设为首页(IE,firefox兼容脚本之家版)

    具体的演示,可以参考我们最下面的 加入收藏 设为首页功能. function addBookmark(title,url) { if (window.sidebar) { window.sidebar.addPanel(title,url,""); } else if( document.all ) { window.external.AddFavorite(url,title); } else if( window.opera && window.print ) {

  • js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

    完整代码如下:chrome下也有提示,说实话一般这类代码一般都是IE下使用,其它浏览器也只是给个提示了. <script type="text/javascript"> //设为首页 www.jb51.net function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try

  • 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码

    今天给大家分享一段设为首页.收藏本站及保存到桌面的js代码,非常实用. 复制代码 代码如下: <script  type="text/javascript"> //设为首页 function SetHome(obj,url){     try{         obj.style.behavior='url(#default#homepage)';         obj.setHomePage(url);     }catch(e){         if(window.

  • js 浮动层菜单收藏

    使用说明 即仅需把附件中的 JS 文件和 CSS 文件引用到网页里,如: 复制代码 代码如下: <script type="text/javascript" src="DivMenu.js"></script> <link href="DivMenu.css" rel="stylesheet" type="text/css" /> 在线演示 http://img.jb51

  • js实现从右向左缓缓浮出网页浮动层广告的方法

    本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js 右侧浮动层效果实现代码(跟随滚动)

    实现代码一. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <!--**

  • jQuery powerFloat万能浮动层下拉层插件使用介绍

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque

  • MooTools 页面滚动浮动层智能定位实现代码

    HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: var $smartFloat = function(elements) { var position = function(element) { var top = element.getPosition().y, pos = element.getStyle(&q

  • jQuery实现浮动层随浏览器滚动条滚动的方法

    jQuery实现浮动层随浏览器滚动条滚动的方法

    本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery页面滚动浮动层智能定位实例代码

    HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q

  • 基于jquery的浮动层效果代码

    本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义. jquery浮动层 #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;} $(document).ready(function(){ $(window).scroll(function (){ var offsetTop = $(window).scrollTop()

随机推荐