- 浏览: 99705 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 1023群友写的 顺手牵羊 保存了 只能输入中文:<in ... -
最新的qq号的验证
2012-05-18 22:43 695!/^[1-9]\d{4,9}$/.test("45 ... -
javaScript设计模式中的掺元类
2012-04-22 10:01 1330今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方 ... -
JS递归将字符串中的字符替换为目标字符
2011-04-06 21:43 926//repStr:原字符串--rgExp:被替换的字符-- ... -
浮点计算方法
2011-01-20 12:57 889//浮点数加法运算 function FloatAdd(a ... -
JavaScript使用技巧精萃
2011-01-15 17:23 816(一).确认删除用法: 1. BtnDel.A ... -
JavaScript判断是否为数组
2011-01-15 17:17 825判断一个对象是否为数组比较麻烦,以下是我收集的各种版本 Do ... -
JavaScript通用的加入收藏夹代码
2011-01-15 17:15 1054<script type="text/jav ... -
jQuery对下拉框、单选框、多选框的处理
2011-01-15 17:13 1104下拉框: //得到 ... -
Firefox和IE之间7个JavaScript的差异
2011-01-15 17:12 681尽管 Java Script 历史上使用冗长而令人生厌的 ... -
JavaScript语法中12个需要绕开的陷阱
2011-01-15 17:10 6981. == Java script有两组 ... -
JavaScript类和继承:this属性
2011-01-15 17:04 762this属性表示当前对象,如果在全局作用范围内使用thi ... -
JavaScript类和继承:prototype属性
2011-01-15 17:03 720我们已经在第一章中使用prototype属性模拟类和继承的实现 ... -
JavaScript类和继承:constructor属性
2011-01-15 17:02 650constructor属性始终指向创建当前对象的构造函数。比 ... -
浅析Javascript闭包的特性
2011-01-15 17:01 671Java script闭包的定义非常晦涩——闭包,是指语法域 ... -
10个最常用的JavaScript自定义函数
2011-01-15 16:57 924Java Script自定义函数在平时的开发过程中比较实用, ... -
详解JavaScript中的Array扩展
2011-01-15 16:54 693Java script中的Array扩展,一般都是从 ... -
JavaScript常用的2种定义类的方式
2011-01-15 16:51 6281. 混合构造函数/原型方式 functio ... -
使用jQuery制作滑动动画效果的层
2011-01-15 16:43 752基本原理 这些具有动态效果的滑动盒都基于同样的基本原理。 ... -
表单验证中时间起止判断的递归处理
2011-01-15 16:41 869在最近一个项目中,表单验证需要对时间的起止范围进行判断:结束时 ...
相关推荐
不用Cookie就可以实现的仿刷新二级高亮菜单,自动识别当前所在的菜单项并高亮显示,应用到了JS函数,主要有两个:一个是通用函数库,另一个是高亮显示类。高亮显示类是用来设置当前选中项菜单的高亮样式,根据URL...
javascript实现操作cookie实现的可记忆菜单
无Cookie的防刷二级高亮菜单,已封装成JS函数,函数使用条件:在使用本函数时,要注意一级菜单和二级...这个无Cookie实现的防刷高亮菜单函数在IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera浏览器测试通过。
用JavaScript操作Cookie实现菜单保存的一个实例,如果你正在编写一个JS层拖动的功能,那么这段代码可以帮你实现拖动位置的保存,让浏览器去保存用户拖动网页某个层的位置
cookie,简单的理解。就是存储数据。通过cookie,数据可以长期保存,不随着浏览器的关闭而消失。 本文有助于初学者加深对cookie的理解,个人总结,不足之处欢迎随时交流。
Javascript操纵Cookie实现购物车程序.txtJavascript操纵Cookie实现购物车程序.txt
内容索引:脚本资源,Ajax/JavaScript,Cookie,防刷菜单 我们在制作菜单的时候,有时候想让菜单有个...动态程序控制的话也会觉得好麻烦,那么这款不用Cookie的防刷新二级高亮菜单为你拓展了一下思路,运行效果如上图示。
这个文件包含了javascript对浏览器cookie文件的设置、读、写、删除四个函数,非常好用。
cookie-banner, 基于JavaScript的cookie信息横幅,适用于欧盟 cookie Cookie标题 Cookie横幅是确保你遵守欧盟Cookie规则的一种非常简单的方法。 只要从你的页面引用 cookiebanner.min.js 脚本就完成了。Cookie ...
jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本...
在PHP中浅谈Cookie与Session.pdf
javascript 操作cookiejavascript 操作cookiejavascript 操作cookie
浏览器接收到来自服务器的Cookie数据之后默认将其保存在浏览器缓存中(如果浏览器关闭,缓存消失,Cookie数据消失),只要浏览器不关闭,当我们下一次发送“特定”请求的时候,浏览器负责将Cookie数据发送给WEB...
javascript对cookie的日常操作
cookie实现的购物车 帮助你认识COOKIE的强大
用户登录功能(cookie实现),user用户信息表中读取信息,并进行判断,利用cookie实现。
jQuery用Cookie实现加入购物车带抛物线效果,因为要用cookie要在服务器(配置的本地环境)下运行,方便实用
通过javascript实现cookie功能 但是这个项目是个java工程 直接点WebRoot下面的页面可以查看
对于一个包含顶部菜单的页头区域如果固定不变的,也就是它不用每次都重新加载,这种情况下用纯CSS或JS方式可以很容易地实现,但今天我要谈的不是这种,今天说的是一级菜单和二级菜单在每个页面中都是动态加载的,也...