- 浏览: 103587 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xwpxcom:
Springmvc学习笔记一(maven项目创建与配置) -
leaow567:
表达不严谨“用户自定义的ClassLoader有ExtClas ...
openfire源码解读第一节----ClassLoader的认识与理解 -
leaow567:
顶起!一起学习
openfire源码解读第一节----ClassLoader的认识与理解 -
xs.cctv:
信科
Springmvc学习笔记一(maven项目创建与配置) -
ywbrj042:
我们也在用这个,也在看openfire的源代码。以后可以一起交 ...
openfire源码解读第一节----ClassLoader的认识与理解
笔者经常采用的高亮Java
script菜单效果设计方式,一般的网页至少都有两级菜单,第一个是顶部的总导航条菜单,另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。
对于一个包含顶部菜单的页头区域如果固定不变的,也就是它不用每次都重新加载,这种情况下用纯CSS或JS方式可以很容易地实现,但今天我要谈的不是这种,今天说的是一级菜单和二级菜单在每个页面中都是动态加载的,也就是它们是作为用户控件的方式载入的。这种情况下要想高亮Javascript菜单效果的状态是一件比较困难的事情。
当然,你可能会说,用cookie可以记录每个页面加载时上次记录的高亮状态,是的,它确实可以记录,但是这种方式在一些复杂的包含许多子页面的应用中,会给用户造成许多困扰和麻烦。比如在cookie生存周期内,重新打开这个项目时,此时cookie的生存周期还没有完全结束,它还记录着上次保存的状态,而这时页面地址已经发生了变化,那么当前高亮的菜单所指向的就不是用户所希望看到的页面。实践证明,这个cookie的生存周期无论你设置多长都不能完美解决用户恶意刷新页面的状况。这确实是一件糟糕的事情!
那么有没有一种较好的办法来解决这种状况呢?
答案是有的。我们知道要解决这个问题
,最理想的办法是在每个页面加载时,根据页面的url地址显式地设置当前菜单的高亮样式。这能完美地解决此类问题,并且这种方式无论用户如何恶意点击刷新按钮,高亮状态依旧保持不变。
知道了原理,要实现起来就容易多了。
【结构层】
一级菜单结构层:
- <ul id="menu">
- <li><a href="default.html">首页</a></li>
- <li><a href="clothing.html">服装用品</a></li>
- <li><a href="house.html">家居用品</a></li>
- <li><a href="cosmetic.html">化妆用品</a></li>
- <ul>
可以看到在这个一级菜单中,其链接地址一般是没有参数值的。 二级菜单的结构层:
- /*一级菜单的三种样式设置*/
- #menu li a.normal{background:#fff;}//普通样式
- #menu li a.over{background:#00ff00;} //翻滚样式
- #menu li a.cur{background:#ff0000;color:#fff;} //高亮样式
- /*二级菜单的三种样式设置*/
- #othermenu li a.normal{background:#fff;} //普通样式
- #othermenu li a.over{background:#AA7F00;color:#fff;} //翻滚样式
- #othermenu li a.cur{background:#7F0000;color:#fff;} //高亮样式
与一级菜单不同的是,我们将二级菜单中的链接地址加入两个参数值,pId参数指向的是顶部一级菜单的的序号,而sId则是菜单自己的顺序号。我们将这两个菜单的总容器ul都设置了两个不同中的ID,它们需要在JS中调用,所以千万不能少。
【样式层】
关于样式,其实都没有什么特别的地方,你可以随心所意地设置成你想要的样式,只是需要注意的地方是,我们需要单独设置高亮Javascript菜单效果的三种状态样式,以供JS动态调用。
- /*一级菜单的三种样式设置*/
- #menu li a.normal{background:#fff;}//普通样式
- #menu li a.over{background:#00ff00;} //翻滚样式
- #menu li a.cur{background:#ff0000;color:#fff;} //高亮样式
- /*二级菜单的三种样式设置*/
- #othermenu li a.normal{background:#fff;} //普通样式
- #othermenu li a.over{background:#AA7F00;color:#fff;} //翻滚样式
- #othermenu li a.cur{background:#7F0000;color:#fff;} //高亮样式
【行为层】
因为要在行为层中控制菜单的三种状态,所以对于A链接标签,我们就不使用hover伪类来达到菜单的三种动态行为了,我们可以用
onmouseover、onmouseout和onclick来模仿伪类的三种行为,这样好便于js的动态调整。并且为了达到行为、样式和结构的三层分离,我们也不用在A标签的html中去加上动态的行为控制代码,这不是一种良好的制作习惯。因此我们需要在页面的加载函数上做点文章,这就需要使用到
onload函数,当页面一加载完后就动态绑定a标签的三种行为状态。
在页面一加载完成后,我们首先获取当前的页面url字符串,再根据这个字符串和一二级菜单中的A标签的href地址进行对比,如果存在相同项,则高亮此菜单项的样式。
详细的注释说明我都在下面的函数中一一标注出来,在此就不一一细述了。关键函数代码如下
- //根据URL地址的参数或字符串高亮当前菜单。
- function hightLightMenu(firstMenuID,twoMenuID){
- var
strUrl,strHref,subNavs,strLast,strParentID,strSelfID,parentID,selfID,strID;
- var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");
- // 如果链接没有参数,或者URL链接中不存在我们要获取的参数,则返回数组中的序号
- if(location.href.indexOf("?")==-1){
-
strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL页面名称
- //一级菜单高亮
- for (var i = 0; i < Navs.length; i++) {
- //在IE6,IE7中strHref获得的是全路径,而在IE8和ff中获得的是页面名称,为了兼容,需要将它的字符串进行拆分
-
strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);
- if(strUrl==strHref){
- //高亮当前菜单项
- addClass(Navs[i],"cur");
- }
- else{//如果是其它项,则绑定鼠标两态事件
- (function(i){
- var obj=Navs[i];
- addEventHandler(obj,"mouseover",function(){overMe(obj)});
-
addEventHandler(obj,"mouseout",function(){outme(obj)});
- })(i)
- }
- }
- //二级菜单高亮
- if (document.getElementById(twoMenuID) != null) {//判断是否存在二级菜单
- //有可能二级菜单不存在,如首页只有一级菜单,所以当菜单id存在时,则
- subNavs =
document.getElementById("othermenu").getElementsByTagName('a');
- for (var n = 0; n < subNavs.length; n++) {
- hightlight(subNavs,n,0);//默认高亮第一个菜单项
- }
- }
- }
- else{
- //如果url中带有参数的页面,则
- strLast = location.href.substring(location.href.indexOf("?")+1);
- strParentID=strLast.substring(0,strLast.indexOf("&"));
- strSelfID=strLast.substring(strLast.indexOf("&")+1);
-
parentID=strParentID.substring(strParentID.indexOf("=")+1);//获得第一个参数,这是一级菜单的id
-
selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//获得第二个参数,这是二级菜单的id
- //一级菜单高亮
- for (var i = 0; i < Navs.length; i++) {
- hightlight(Navs,i,parentID);
}
- //二级菜单高亮
- if (document.getElementById(twoMenuID) != null) {//判断是否存在二级菜单
- subNavs =
document.getElementById(twoMenuID).getElementsByTagName('a');
- for (var n = 0; n < subNavs.length; n++) {
- strID=selfID - 1;
- hightlight(subNavs,n,strID);
- }
- }
- }
- }
- //高亮函数
- function hightlight(elementArray,inumber,curMenuIndex){
- if (inumber == curMenuIndex) {
- addClass(elementArray[inumber],"cur");//高亮当前菜单样式
- }
- else {
- (function(inumber){
- var obj = elementArray[inumber];
- addEventHandler(obj, "mouseover",
function(){overMe(obj)});//增加鼠标移上去时的事件
- addEventHandler(obj, "mouseout",
function(){outme(obj)});//增加鼠标移走时的事件
- })(inumber)
- }
- }
经过如上一番设置,一个通用、兼容的高亮函数就诞生了,我们看看高亮Javascript菜单效果截图:
本案例的高亮函数在如下浏览器中测试通过:
IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera
高亮Javascript菜单效果的实现到此结束。
发表评论
-
文本框只允许输入中文
2012-05-26 18:35 1078群友写的 顺手牵羊 保存了 只能输入中文:<in ... -
最新的qq号的验证
2012-05-18 22:43 727!/^[1-9]\d{4,9}$/.test("45 ... -
javaScript设计模式中的掺元类
2012-04-22 10:01 1366今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方 ... -
JS递归将字符串中的字符替换为目标字符
2011-04-06 21:43 968//repStr:原字符串--rgExp:被替换的字符-- ... -
浮点计算方法
2011-01-20 12:57 924//浮点数加法运算 function FloatAdd(a ... -
JavaScript使用技巧精萃
2011-01-15 17:23 857(一).确认删除用法: 1. BtnDel.A ... -
JavaScript判断是否为数组
2011-01-15 17:17 857判断一个对象是否为数组比较麻烦,以下是我收集的各种版本 Do ... -
JavaScript通用的加入收藏夹代码
2011-01-15 17:15 1081<script type="text/jav ... -
jQuery对下拉框、单选框、多选框的处理
2011-01-15 17:13 1134下拉框: //得到 ... -
Firefox和IE之间7个JavaScript的差异
2011-01-15 17:12 710尽管 Java Script 历史上使用冗长而令人生厌的 ... -
JavaScript语法中12个需要绕开的陷阱
2011-01-15 17:10 7241. == Java script有两组 ... -
JavaScript类和继承:this属性
2011-01-15 17:04 794this属性表示当前对象,如果在全局作用范围内使用thi ... -
JavaScript类和继承:prototype属性
2011-01-15 17:03 753我们已经在第一章中使用prototype属性模拟类和继承的实现 ... -
JavaScript类和继承:constructor属性
2011-01-15 17:02 688constructor属性始终指向创建当前对象的构造函数。比 ... -
浅析Javascript闭包的特性
2011-01-15 17:01 714Java script闭包的定义非常晦涩——闭包,是指语法域 ... -
10个最常用的JavaScript自定义函数
2011-01-15 16:57 964Java Script自定义函数在平时的开发过程中比较实用, ... -
详解JavaScript中的Array扩展
2011-01-15 16:54 727Java script中的Array扩展,一般都是从 ... -
JavaScript常用的2种定义类的方式
2011-01-15 16:51 6771. 混合构造函数/原型方式 functio ... -
使用jQuery制作滑动动画效果的层
2011-01-15 16:43 782基本原理 这些具有动态效果的滑动盒都基于同样的基本原理。 ... -
表单验证中时间起止判断的递归处理
2011-01-15 16:41 901在最近一个项目中,表单验证需要对时间的起止范围进行判断:结束时 ...
相关推荐
不用Cookie就可以实现的仿刷新二级高亮菜单,自动识别当前所在的菜单项并高亮显示,应用到了JS函数,主要有两个:一个是通用函数库,另一个是高亮显示类。高亮显示类是用来设置当前选中项菜单的高亮样式,根据URL...
javascript实现操作cookie实现的可记忆菜单
无Cookie的防刷二级高亮菜单,已封装成JS函数,函数使用条件:在使用本函数时,要注意一级菜单和二级...这个无Cookie实现的防刷高亮菜单函数在IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera浏览器测试通过。
### JavaScript基础篇——浅谈cookie #### 一、引言 在Web开发中,如何保持用户的登录状态或记住用户的一些个性化设置是一个常见的需求。对于这种轻量级的数据存储需求,`cookie`是一种非常实用的技术。它能够帮助...
用JavaScript操作Cookie实现菜单保存的一个实例,如果你正在编写一个JS层拖动的功能,那么这段代码可以帮你实现拖动位置的保存,让浏览器去保存用户拖动网页某个层的位置
JavaScript Cookie 操作框架 XCookie 是一个用于方便地管理和操作浏览器cookies的工具,它简化了JavaScript中处理cookie的复杂性。在Web开发中,cookies经常被用来存储用户状态、会话信息或其他临时数据,而XCookie...
在JavaScript中,Cookie是一种在客户端存储少量数据的机制,它对于网页应用的用户状态管理和临时存储信息具有重要作用。本文将详细讲解如何封装一个Cookie操作类,实现对Cookie的增删改查功能。 首先,理解Cookie的...
在网页中实现Cookie功能是JavaScript的一个常见应用场景。Cookie是一种存储在用户浏览器上的小型文本文件,常用于管理用户会话、保存用户设置或者跟踪用户行为。在这个Java工程中,尽管主要编程语言是Java,但...
在JavaScript实现的类似淘宝网顶部导航菜单的项目中,我们主要关注的是前端开发技术,特别是JavaScript作为主要的脚本语言,以及ECMAScript规范对它的影响。这个demo旨在模拟淘宝网的用户界面,提供购物车、收藏夹、...
总结来说,"JavaScript + CSS 菜单"是一个结合了 CSS 的样式设计和 JavaScript 的交互功能的菜单系统,通过Cookie实现了菜单状态的持久化。开发者可以学习并应用这些技术来创建更富吸引力且用户体验良好的网页菜单。...
jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本...
### JavaScript操纵Cookie实现购物车程序 #### 概述 在电子商务网站中,购物车功能是不可或缺的一部分。通过JavaScript操作Cookie可以实现一个简单的购物车系统。本文档将详细解析如何使用JavaScript来操纵Cookie...
每个文件名都以"JavaScript经典效果集"开头,可能包含不同的效果实例,比如导航菜单、图片轮播、下拉列表、计时器等。通过查看这些HTML文件,你可以逐步了解和实践JavaScript的各种效果,并提升你的编程技能。
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态效果。在构建网站时,树形菜单是一种常见的导航结构,它可以帮助用户清晰地浏览和组织大量的信息。当用户在浏览过程中...
内容索引:脚本资源,Ajax/JavaScript,Cookie,防刷菜单 我们在制作菜单的时候,有时候想让菜单有个...动态程序控制的话也会觉得好麻烦,那么这款不用Cookie的防刷新二级高亮菜单为你拓展了一下思路,运行效果如上图示。
cookie-banner, 基于JavaScript的cookie信息横幅,适用于欧盟 cookie Cookie标题 Cookie横幅是确保你遵守欧盟Cookie规则的一种非常简单的方法。 只要从你的页面引用 cookiebanner.min.js 脚本就完成了。Cookie ...
总结,实现不用Cookie的仿刷新二级高亮菜单,关键在于根据页面URL动态设置菜单的高亮状态。通过合理构建HTML结构,定义CSS样式,并利用JavaScript处理页面加载后的逻辑,我们可以创建一个高效且用户体验良好的菜单...
这个文件包含了javascript对浏览器cookie文件的设置、读、写、删除四个函数,非常好用。
"浅谈Cookie与Session在PHP中的应用" Cookie是浏览器保存的一种小型文本文件,用于存储用户信息,以便在用户访问网站时,服务器可以识别用户身份。Cookie可以分为两种类型:会话Cookie和持久Cookie。会话Cookie是指...
在这个实例中,我们结合了JavaScript和Cookie技术来实现这一功能。 首先,HTML部分定义了一个输入框(`<input id="txt" type="text">`)以及相关的CSS样式来创建下拉菜单的效果。CSS通过`.Menu`和`.Menu2`类设置了...