一、让页面上所有的链接都在新窗口打开。
除此可以设置页面上所有连接的属性,让它们在新窗口打开之外,还可以对页面上的这些链接做别的事情。
1、给所有的链接添加一个新的类;
2、为所有链接添加内容与链接文本一致的title属性;
3、为所有链接分别添加一个rel属性;
4、删除所有链接的href属性,从而禁用这些链接。
下面是用jQuery让页面上的链接在新窗口打开的方法,代码如下:
选取#links li元素的后代元素a,然后使用attr()方法把这些链接元素的target属性设置为_blank。
$('#links li a').attr('target', '_blank');
二、突出显示导航中的当前选中项。
方法是用jQuery脚本对菜单项URL与页面实际URL进行对比,让正确的菜单项高亮。
1、创建一个变量path,并为它赋值为location.pathname,pathname是javascript原生对象location的一个属性,它返回URL中域名之后的部分。
var path = location.pathname; (假如我们正在访问页面www.qq.com/mycode/demo.html。那么location.pathname就等于/mycode/demo.html。
2、再创建一个变量pathArray,然后使用原生的java Script字符串方法.split()把pathname从/处拆分,得到一个数组。
var pathArray = path.split( '/' ); (拆分结果,即pathname的值是['mycode' , 'demo.html']。
3、创建最后一个变量pArrLength,把它的值设置为pathArray的长度。
var pArrLength = pathArray.length;
4、创建一个for循环,迭代处理数组pathArray的每一个值。然后使用属性选择器选中包含其中某个值的所有链接,为其加上selected类。这里的属性选择器使用了通配符(*),他会匹配href的任意部分。
for(i = 0 ; i < pArrLength;i++){
$(" a[ href*=' "+pathArray[i] + " ' ]").addClass("selected");
}
三、创建简单的下拉菜单。
1、创建html文件。
<div id="header">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Our Work</a>
<ul class="subnav">
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
</ul>
<li><a href="#">Services</a>
<ul class="subnav">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
2、准备样式表
使用YUI(Yahoo! User Interface)清理样式
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3.h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
3、设置CSS控制页面上主菜单和下拉菜单的布局。
.container{width:950px;margin:10px auto;font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;border:1px solid #333;}
p{margin:10px;}
ul#navigation{list-style-type:none;background:#CE0100;height:63px;font-size:24px;}
ul#navigation li{float:left;width:175px;text-align:center;position:relative;height:63px;padding:20px 5px 10px 5px;}
ul#navigation li a{color:#fff;text-decoration:none;display:block;}
ul#navigation li a.active{border:1px solid blue;} //在jQuery里面添加了类active,在CSS里面设置样式
ul#navigation li ul.subnav {background:#E7F1D2;width:175px; clear:both;display:none;position:absolute;top:63p x; -moz-border-radius-bottomleft:8px;-moz-border-radius-bottom:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-radius:8px;border-left:2px solid #998;border-right:2px solid #998;border-bottom:2px solid #998;}
ul#navigation li ul.subnav li{clear:both; height:40px;padding:0;text-decoration:center;margin:0px;}
ul#navigation li ul.subnav li a{background:none;font-size:18px;color:#333;text-decoration:none;padding:10px 0;border:none;}
ul#navigation li ul.subnav li a:hover{background:#DBF1AD;font-size:18px;color:#333;border:none;}
4、使用选择器#navigation li选中菜单项,设置它的hover事件。hover事件是mouseenter和mouseleave事件的组合。第一个事件处理函数处理mouseenter事件,我们需要用.find()找到类名为subnav的嵌套列表,然后调用.slideDown()方法把它显示出来。第二个事件处理函数处理mouseleave事件,它做得事情和mouseenter事件刚好相反,即用.find()找出相应的子菜单,然后调用.slideUp()方法把它收起来。对那些没有子菜单的元素来说,当鼠标悬停在他们之上时,由于找不到.subnav子元素,什么都不会发生。
$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');
},function(){
$(this).find('.subnav').slideUp('fast');
});
});
PS:上面的语句用限定条件(this)。先选中#navigation li元素,然后绑定hover事件,我们就可以用this关键字引用被hover的元素,从而确保.slideDown()方法只应用到被悬停列表项的子菜单上。
5、最后一步,当鼠标位于主菜单或相应的子菜单上时,主菜单和相应的子菜单应该保持高亮。具体是:使用.find()方法找到相应的a元素,如果是mouseenter事件就添加active类,否则就删除active类。
$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').slideUp('fast');
$(this).find('a').removeClass('active');
});
});
6、还可以使用.animate()方法为下拉菜单增加特效。CSS属性、动画持续时间、缓动方式及回调函数。
$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').animate({opacity:1.0,height:'toggle'},500);
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').animate({opacity:0,height:'toggle'},500);
$(this).find('a').removeClass('active');
});
});
四、创建折叠菜单
折叠菜单只显示一节的内容,同时隐藏其他内容。
1、首先定义折叠菜单的HTML结构。两个元素:一个是折叠菜单标题元素,一个是折叠菜单的内容元素。
<div id="accordion">
<div class="accordion-header">
<h3>Books</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Business</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Romance</a></li>
</ul>
<div class="accordion-header">
<h3>Electronics</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Automobile</a></li>
<li><a href="#">Appliance</a></li>
</ul>
<div class="accordion-header">
<h3>Sporting Goods</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Baseball</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</div>
2、使用CSS reset,建议使用YUI,上一个节点有相关代码。
3、使用CSS定义菜单和内容元素的样式。菜单图标使用了CSS“精灵”(sprite)。
“精灵”是指创建一张大图,然后通过背景定位技术用这一张图为Web站点上的多个元素提供背景。使用“精灵”的好处就是可以大大减少站点向Web服务器请求图片的次数,从而降低了载入时间,提高了站点性能。如果你的站点中使用了20多张图片,就能明显体会到“精灵”时的性能改善。此外,“精灵”还有助于防止图片载入过程中的闪烁。(比如使用两张图片制作翻转效果,并且被悬停的图片尚未加载完时)。
#accordion{width:225px;margin:10px 0px 10px 10px;}
#accordion .accordion-header{background:#3971AC;color:#fff;border-bottom:1px solid #fff;position:relative;}
#accordion .accordion-header h3{margin:0;cursor:pointer;text-indent:10px;padding:5px 0;}
#accordion .header-active{background:#48ABC3;}
#accordion .accordion-header span{background:url(../images/accordion_spriter.gif) no-repeat;display:block;position:absolute;width:11px;height;12px;top:5px;left:200px;}
#accordion .accordion-header span.icon-active{background:url(../images/accordion_sprite.gif) no-repeat;background-position:0 -12px;display:block;position:absolute;width:11px;height:12px;top:5px;left:200px;}
#accordion ul.accordion-content{margin:0px 0 0px 0;padding:5px 5px 10px 5px;list-style-type:none;background:#A8D7E2;}
#accordion ul.accordion-content li{padding:1px 0px;display:block;margin:0;padding:2px 5px;}
#accordion ul.accordion-content li a{color:#D16C3A;}
4、在页面加载完成之后,确保只有第一个菜单元素及其内容元素可见。以下jQuery代码结合使用.not()方法和:first过滤器,使第一个元素之外的其他折叠内容(内容元素)隐藏。
$('.accordion-content').not(':first').hide();
.not()方法过滤掉参数选择器匹配的任意元素或者选择器。参数选择器可以是某种过滤器(如本例所示),也可以是一个具体的元素(在下面这一步我们就会看到这种例子)。
5、隐藏完除第一个外的所有.accordion-content元素之后,我们用另一条语句找出第一个.accordion.content元素,并调用.show()方法(确保它可见):
$('.accordion-content:first').show();
6、为了让当前菜单项高亮,我在CSS文件中定义了一个header_active类。使用下面的代码把这个类应用到第一个.accordion-header元素:
$('.accordion-header:first').addClass('header-active');
我还使用空的span标签为折叠菜单的标题加了图标。我定义了一个icon-active类,它会显示成一个向下的箭头,提示用户这个内容区是展开状态。如果标题没有这个类,span标签就会显示成一个向右的箭头。使用:first过滤器选中第一个.accordion-header元素,然后链式调用.find()方法找出它的span后代元素,为它加上.icon-active类。
$('.accordion-header:first').find('span').addClass('icon-active');
7、现在进入有趣的部分——让折叠菜单响应用户输入,也就是为.accordion-header标题元素绑定click事件处理函数。
$('.accordion-header').click(function(){
});
8、click事件处理函数中的第一条语句负责让当前展开的元素缩回去,并移除使它们高亮的类。为此,只需选中可见的.accordion-content元素,并调用.slideUp()。之后再调用.prev()得到DOM树的上一个元素,也就是对应的.accordion-header元素,删掉该元素的header-active类。
$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
});
.prev()方法用于查找DOM树中的上一个兄弟元素。.prev()方法还支持选择器参数,比如你可以将.active作为参数传递给它。
9、增加一条语句,确保把所有可见的.icon-active元素显示成向右的箭头,方法是移除icon-active类。
$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active'); //类的名字icon-active前面不需要句点。
});
请务必记住,.addClass()、.removeClass()和hasClass()方法的参数,类的名字前不需要句点。这是一个常被忽视的问题,会导致jQuery脚本错误。另外,.is()、.filter()方法和.not()方法在参数为类名时,一定要加上句点。
10、增加一条语句,使用this关键字选中被单击的菜单标题,给它加上header-active类。然后用.next()方法选中它的下一个元素,即内容元素,调用slideDown()让其慢慢滑下。
$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
$(this).addClass('header-active').next().slideDown('slow');
});
11、最后一条语句使用this关键字,结合.find()方法找到.accordion-header元素中的span标签,给它加上.icon-active类。
$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
$(this).addClass('header-active').next().slideDown('slow');
$(this).find('span').addClass('icon-active');
});
如果在站点或应用中,折叠菜单项不是页面固有的,而是被动态添加到DOM中的,你一定要改用.live()方法绑定click事件。否则那些在DOM加载完之后才添加进来的元素不会响应click事件。
最后,将所有的HTML、CSS和jQuery代码组合到一起,并在浏览器中载入这个页面,你就会看到一个生龙活虎的折叠菜单。
总结不足:
1、随着不断向折叠菜单中添加菜单项,我们开始需要滚动页面才能选择或查看其中嵌入的内容。
2、刷新页面时,折叠菜单并不会记住上一次展开的是哪个菜单项,不过我们可以通过jQuery和cookie实现这类功能。解决这个问题还有一个更好的、不使用cookie的技术,那就是在URL的查询字符串中使用锚,详见Rebecca Murphey的一篇博文(http://blog.rebeccamur-phey.com/2007/12/04/anchor-based-url-navigation-with-jQuery/)。
3、折叠菜单的当前位置无法保存到书签中。如果你通过添加书签收藏一个页面,期望下次打开它时能打开保存时看到的小节,你的期望会落空。这个问题可以通过上一段中提到的锚技术解决。
4、如果你的站点受众缺乏因特网经验,他们有可能不熟悉折叠菜单,因此很可能根本就不会用。