小谷实战Jquery(四)--标签页效果

这两天完成了实战四五六的例子,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗口效果,都是web层常用的效果.越到后面越发觉得技术这东西,就是一种思路的展现,懂了要实现效果的来龙去脉,代码就是表达的一种工具,后台展示的是逻辑,前台展现的是图形.

说一下这个标签页吧,第一个标签由两部分组成,鼠标移到上面标签上,下面对应显示相应的内容.借助CSS实现标签和内容相融合的效果.这次我们先看最终效果.

小谷实战Jquery(四)--标签页效果

HTML:

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="tab.js"></script> 标签页效果

  • 标签1
  • 标签2
  • 标签3

我是内容1

我是内容2

我是内容3

CSS:

ul,li{ margin:0; padding:0; list-style:none; } #tabfirst li{ float:left; background-color:#000066; color:white; margin-right:3px; padding:5px; border:1px solid white; } #tabfirst li.tabin{ background-color:#000066; border:1px solid #000066; } div.contentfirst{ clear:left; background-color:#000066; color:white; padding:10px; width:300px; height:100px; display:none; } div.contentin{ display:block; }

值得一提的是,很多时候我们的鼠标滑过,并不是要改变当前的内容,而是不小心或者不注意碰到了鼠标,如何解决这一bug呢,jQuery的强大再次上演.不错,我们使用了setTimeout函数,执行时,在载入后延迟指定时间再去执行表达式,这样就可以避免每次滑动都改变内容的漏洞.

JS代码:

var timeoutId; $(document).ready(function(){ $("li").each(function(index){ //每一个包装li的jQuery对象都会执行function中的代码 //index是当前执行这个function的li对应在所有li组成的数组中的索引值 $(this).mouseover(function(){ var liNode=$(this); timeoutId=setTimeout(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //清除有tabin的li标签的tabin的class $("li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 $("div").eq(index).addClass("contentin"); $(liNode).addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timeoutId); }); }); });

第二个标签有所不同,是在单击之后,内容区载入相应的页面,载入过程中与服务器交互需要等待时间,所以实现了"装载中"的友好提示效果.而且,内容区不同于上面的三个div,而是采用了一个div块,通过载入不同内容即可.

小谷实战Jquery(四)--标签页效果

HTML:

  • 装入完整页面
  • 装入部分页面
  • 从远程获取数据

CSS:

#tabsecond li{ float:left; color:blue; background-color:white; margin-right:2px; padding:5px; cursor:pointer; } #tabsecond li.tabin{ background-color:#F2F6FB; border:1px solid black; border-bottom:0; z-index:10; position:relative;/*使用z-index前提,position为relative或absolute*/ } #contentsecond{ width:350px; height:150px; padding:10px; background-color:#f2f6fb; clear:left; border:1px solid black; position:relative; top:-1px; } img{ display:none; }

JS:

//在整个页面装入完成后,标签效果2的内容区域需要装入静态的html页面内容 $("#contentsecond").load("tabLoad.html"); //找到标签2效果对应的三个标签,注册鼠标点击事件 $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if (index==0){ //装入静态完整页面 $("#contentsecond").load("tabLoad.html"); }else if (index==1){ //装入动态部分页面 $("#contentsecond").load("tabLoad.jsp"); }else if(index==2){ //装入远程数据(这里也是一个动态页面输出的数据) $("#contentsecond").load("tabData.jsp"); } }); }); //对于loading图片绑定Ajax请求开始和交互结束的事件 $("#contentsecond img").bind("ajaxStart",function(){ //把div里面的内容情况 $("#realcontent").html(""); //整个页面中任意Ajax交互开始前,function中的内容会被执行 $(this).show(); }).bind("ajaxStop",function(){ //整个页面中任意Ajax交互结束后,function内容会被执行 $(this).hide(); });

jQuery的使用在后续项目中加强吧,如今再看到网页上各种各样的弹窗,广告之类的特效都不觉神奇了,其实很多东西你开始知道了就很快掌握了,慢慢积累自己的代码库,见的越多,写的越多,技术也就越高超! jQuery就写到这里,ajax也该实现了.

分类:默认分类 时间:2015-03-13 人气:3
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.059 (s). 10 q(s)