您的位置: 首页  >  IT文章  >  jquery实战4-标签页成效

jquery实战4-标签页成效

分类: IT文章 • 2022-10-11 00:27:18
jquery实战4-标签页效果
1.一组标签用一个ul来管理，每一个标签是ul下面的一个li，标签下面显示的内容区域就是用div来管理。
2.跟在浮动（float）元素之后的元素会围绕着浮动元素，如果不希望有这种围绕，可以通过在之后的那个元素上定义clear来清除围绕。
3.实现当前标签和内容区域的融合，可以用相同的背景色和边框。
4.$("#tabsecond li").each(function(index) { ... });
    以每一个匹配的元素作为上下文来执行一个函数。
    意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
5.position属性可以控制元素定位的方式，值为relative时表示想对于原来的位置（本应该所在的位置）进行定位，absolute是绝对位置，通过设定top，right，bottom，left来进行位置控制。
6.只有position为relative或absolute的元素，z-index才会生效。
7.$("#realcontent").load("TabLoad.jsp h2"); 支持部分装载，用选择器选择。
8.$("#contentsecond img").bind("ajaxStart", function() { ... });对于jquery中没有提供注册方法的事件，可以通过bind绑定。

html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>  	
     <title>jquery5-标签页效果</title>  
     <link type="text/css" rel="stylesheet" href="css/tab.css">  
     <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
     <script type="text/javascript" src="js/tab.js"></script>  
 </head>  
 <body>  
 <ul id="tabfirst">  
     <li class="tabin">标签1</li>  
     <li>标签2</li>  
     <li>标签3</li>  
 </ul>  
 <div class="contentin contentfirst">我是内容1</div>  
 <div class="contentfirst">我是内容2</div>  
 <div class="contentfirst">我是内容3</div>  
 <br/>  
 <br/>  
 <br/>  
 <ul id="tabsecond">  
     <li class="tabin">装入完整页面</li>  
     <li>装入部分页面</li>  
     <li>从远程获取页面</li>  
 </ul>  
 <div id="contentsecond">  
     <img src="image/loading.gif" alt=" 装载中"/>  
   
     <div id="realcontent"></div>  
 </div>  
 </body>  
 </html>


css：
 ul, li {  
     margin: 0;  
     padding: 0;  
     list-style: none;  
 }  
   
 #tabfirst li {  
     float: left;  
     background-color: #868686;  
     color: white;  
     padding: 5px;  
     margin-right: 2px;  
     border: 1px solid white;  
 }  
   
 #tabfirst li.tabin {  
     background-color: #6e6e6e;  
     border: 1px solid #6e6e6e;  
 }  
   
 div.contentfirst {  
     clear: left;  
     background-color: #6e6e6e;  
     color: white;  
     width: 500px;  
     height: 100px;  
     padding: 10px;  
     display: none;  
 }  
   
 div.contentin {  
     display: block;  
 }  
   
 #tabsecond li {  
     float: left;  
     background-color: white;  
     color: blue;  
     padding: 5px;  
     margin-right: 2px;  
     cursor: pointer;  
 }  
   
 #tabsecond li.tabin {  
     background-color: #F2F6FB;  
     border: 1px solid black;  
     border-bottom: 0;  
     z-index: 100;  
     position: relative;  
 }  
   
 #contentsecond {  
     width: 500px;  
     height: 200px;  
     padding: 10px;  
     background-color: #F2F6FB;  
     clear: left;  
     border: 1px solid black;  
     position: relative;  
     top: -1px;  
 }  
 img{  
     display:none;  
 }


js：
 var timeoutid;  
 $(function() {  
     //先找到所有的标签  
    /* $("#li").mouseover(function(){ 
      //将原来显示的内容区进行隐藏 
      //当前标签所对应的内容区域显示出来 
      });*/  
     $("#tabfirst li").each(function(index) {  
         //每一个包装了li的jquery的对象，都会执行function中的代码  
         //index是当前执行这个function代码的li对应在所有li组成的数组  
         //中的索引值  
         //有了Index的值之后，就可以找到当前标签对应的内容区域  
         $(this).mouseover(function() {  
             var liNode = $(this);  
             timeoutid = setTimeout(function() {  
                 //将原来显示的内容区进行隐藏  
                 $("div.contentin").removeClass("contentin");  
                 //清除tabin的class定义  
                 $("#tabfirst li.tabin").removeClass("tabin");  
                 //当前标签所对应的内容区域显示出来  
                 $("div.contentfirst").eq(index).addClass("contentin");  
                 liNode.addClass("tabin");  
             }, 300);  
         }).mouseout(function() {  
             clearTimeout(timeoutid);  
         });  
     });  
     //在整个页面装入完成之后，标签效果2的内容区域需要装入静态html页面内容  
     $("#realcontent").load("TabLoad.html");  
     //找到标签2效果对应的三个标签，注册鼠标点击时间  
     $("#tabsecond li").each(function(index) {  
   
         $(this).click(function() {  
             $("#tabsecond li.tabin").removeClass("tabin");  
             $(this).addClass("tabin");  
             if (index == 0) {  
                 $("#realcontent").load("TabLoad.html");  
             } else if (index == 1) {  
                 $("#realcontent").load("TabLoad.jsp h2");  
             } else if (index == 2) {  
                 //装入远程数据（这里也是一个动态页面输出的数据）  
                 $("#realcontent").load("TabData.jsp");  
             }  
         });  
   
     });  
     //对于loading图片的绑定ajax请求开始和交互结束的事件  
     $("#contentsecond img").bind("ajaxStart", function() {  
         //把div里面的内容清空  
         $("#realcontent").html("");  
         //整个页面中任意ajax交互开始前，function中的内容会被执行  
         $(this).show();  
     }).bind("ajaxStop", function() {  
         //整个页面中任意ajax交互结束后，function中的内容会被执行  
         $(this).slideUp("1000");  
     });  
   
});

相关推荐