jquery的选项卡

原文：http://www.cnblogs.com/miqi2214/archive/2008/11/12/1332143.html

JQuery制作的选项卡，重点体现在JS与HTML的分离

基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

No.1 Menu

• Label 1.1
• Label 1.2
• Label 1.3
• Label 1.4

infomation 1.3

No.2 Menu

• Label 2.1
• Label 2.2
• Label 2.3
• Label 2.4

infomation 2.3

Javascript（jquery）代码如下：

 1  < script language = " javascript "  type = " text/javascript " >
 2  $(document).ready( function (){
 3      $( " ul.menu li:first-child " ).addClass( " current " );
 4      $( " div.content " ).find( " div.layout:not(:first-child) " ).hide();
 5      $( " div.content div.layout " ).attr( " id " ,  function (){ return  idNumber( " No " ) +  $( " div.content div.layout " ).index( this )});
 6      $( " ul.menu li " ).click( function (){
 7           var  c  =  $( " ul.menu li " );
 8           var  index  =  c.index( this );
 9           var  p  =  idNumber( " No " );
10          show(c,index,p);
11      });
12      
13       function  show(controlMenu,num,prefix){
14           var  content =  prefix  +  num;
15          $( ' # ' + content).siblings().hide();
16          $( ' # ' + content).show();
17          controlMenu.eq(num).addClass( " current " ).siblings().removeClass( " current " );
18      };
19 
20       function  idNumber(prefix){
21           var  idNum  =  prefix;
22           return  idNum;
23      };
24  });
25  < / script>

CSS样式代码如下：

 1  <style type="text/css">
 2  *  { margin : 0 ;  padding : 0 }
 3  ul,li  {  list-style : none }
 4  .box  { width : 450px ;  height : 150px ;  border : 1px solid #ccc ;  margin : 10px ;  font-size : 12px ;  font-family : Verdana, Arial, Helvetica, sans-serif }
 5  .tagMenu  { height : 28px ;  line-height : 28px ;  background : #efefef ;  position : relative ;  border-bottom : 1px solid #999 }
 6  .tagMenu h2  { font-size : 12px ;  padding-left : 10px ; }
 7  .tagMenu ul  { position : absolute ;  left : 100px ;  bottom : -1px ;  height : 26px ; }
 8  ul.menu li  { float : left ;  margin-bottom : 1px ;  line-height : 16px ;  height : 14px ;  margin : 5px 0 0 -1px ;  border-left : 1px solid #999 ;  text-align : center ;  padding : 0 12px ;  cursor : pointer }
 9  ul.menu li.current  { border : 1px solid #999 ;  border-bottom : none ;  background : #fff ;  height : 25px ;  line-height : 26px ;  margin : 0 }
10  .content  {  padding : 10px }
11  </style>

HTML结构代码如下：

 1  < body >
 2  < div  class ="box" >
 3       < div  class ="tagMenu" >
 4           < h2 > No.1 Menu </ h2 >
 5           < ul  class ="menu" >
 6               < li > Label 1.1 </ li >
 7               < li > Label 1.2 </ li >
 8               < li > Label 1.3 </ li >
 9               < li > Label 1.4 </ li >
10           </ ul >
11       </ div >
12       < div  class ="content" >
13           < div  class ="layout" > infomation 1.1 </ div >
14           < div  class ="layout" > infomation 1.2 </ div >
15           < div  class ="layout" > infomation 1.3 </ div >
16           < div  class ="layout" > infomation 1.4 </ div >
17       </ div >
18  </ div >
19 
20  < div  class ="box" >
21       < div  class ="tagMenu" >
22           < h2 > No.2 Menu </ h2 >
23           < ul  class ="menu" >
24               < li > Label 2.1 </ li >
25               < li > Label 2.2 </ li >
26               < li > Label 2.3 </ li >
27               < li > Label 2.4 </ li >
28           </ ul >
29       </ div >
30       < div  class ="content" >
31           < div  class ="layout" > infomation 2.1 </ div >
32           < div  class ="layout" > infomation 2.2 </ div >
33           < div  class ="layout" > infomation 2.3 </ div >
34           < div  class ="layout" > infomation 2.4 </ div >
35       </ div >
36  </ div >
37  </ body >

改进版：JQuery制作的选项卡改进版

2.JQuery制作的选项卡改进版

记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的，题目叫《JQuery制作的选项卡，重点体现在JS与HTML的分离》。最近做项目的时候，再回头看这段代码感觉写得太零散，所有方法函数都是全局函数，没用整合成一个完整的方法。这样的后果就是不便于管理，代码拷贝的时候容易遗漏，而且方法写得太死，扩展性不好。所以趁着这次做新项目，把这个效果改进下封装成一个完整的方法。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html

老规矩，首先分析Html（我一直认为良好的html结构是实现好程序的基石）

 1  <!--  包裹选项卡的父级层  -->
 2  < div  class ="" >
 3       <!--  选项卡列表，ul外用一个宽度足够长的div包裹，做为遮罩层，让里面的ul列表在一行显示而不会折行  -->
 4       < div  style ="" >
 5           < ul  class ="" >
 6               < li >< span > 选项卡标签 1 </ span ></ li >
 7               < li >< span > 选项卡标签 2 </ span ></ li >
 8               < li >< span > 选项卡标签 3 </ span ></ li >
 9           </ ul >
10       </ div >
11       <!--  包裹内容层的父级层  -->
12       < div  class ="" >
13           <!--  具体的内容层  -->
14           < div  class ="" > 1.1 </ div >
15           < div  class ="" > 1.2 </ div >
16           < div  class ="" > 1.3 </ div >
17       </ div >
18  </ div >
19 

样式代码就不放上来了，大家用firebug看效果更好。

接着是程序代码：

 1  j.fn.tabs  =   function (tabList,tabTxt,options){
 2       var  _tabList  =  j( this ).find(tabList);
 3       var  _tabTxt  =  j( this ).find(tabTxt);
 4      
 5       // 为了简化操作，强制规定选项卡必须用li标签实现
 6       var  tabListLi  =  _tabList.find( " li " );
 7       var  defaults  =  {currentTab: 0 ,defaultClass: " Current " };
 8       var  o  =  j.extend({},defaults,options);
 9      _tabList.find( " li:eq( " + o.currentTab + " ) " ).addClass(o.defaultClass);
10      
11       // 强制规定内容层必须以div来实现
12      _tabTxt.children( " div " ).each( function (i){
13          j( this ).attr( " id " , " div " + i);                          
14      }).eq(o.currentTab).css({ " display " : " block " });
15      
16      tabListLi.each(
17           function (i){
18              j(tabListLi[i]).click(
19                   function (){
20                       if (j( this ).className  !=  o.defaultClass)
21                      {
22                          j( this ).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
23                      }
24                      _tabTxt.children( " div " ).eq(i).css({ " display " : " block " }).siblings().css({ " display " : " none " });
25                  }
26              )
27          }
28      );
29       return   this ;
30  };

最后是调用：

1  j(document).ready( function (){
2      j( " #ex01 " ).tabs( " .ContactMenu " , " .ContactBox " ,{currentTab: 0 });
3      j( " #ex01 " ).find( " .exContent2 " ).tabs( " .ContactMenu2 " , " .ContactBox2 " ,{currentTab: 0 });
4      
5      j( " #ex02 " ).tabs( " .ContactMenu " , " .ContactBox " ,{currentTab: 1 });
6      j( " #ex02 " ).find( " .exContent2 " ).tabs( " .ContactMenu2 " , " .ContactBox2 " ,{currentTab: 1 });
7  });

OK，搞定。代码实现方式都不难，有点jquery基础的一看就明白了。关键是如果没有业务需求，可能就不会促使我们去发现旧问题的不足，以及想新思路新方法来改进它。一句话：业务需求促进技术更新。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html

3.博友对 JQuery 制作的选项卡改进版之改进版的丰富

原文：http://www.cnblogs.com/eycbest/archive/2010/03/29/1699305.html

JQuery 制作的选项卡改进版之改进版

首先，感谢 miqi2214 ，在他的一篇博文中，我发现了《JQuery 制作的选项卡改进版》

介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只 要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

 

 在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。

现在，我把代码贴上，与众博友共享

这是js脚本 

  1  /*  jquery-fn-accordion v0
  2  * Based on jQuery JavaScript Library v3
  3  * http://jquery.com/
  4  *
  5  * The author of the following code: miqi2214 , wbpbest
  6  * Blog:eycbest.cnblogs.com , miqi2214.cnblogs.com
  7  * Date: 2010-3-10
  8  */
  9  //注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
 10  // 参数说明：
 11  // tabList:包裹选项卡的父级层
 12  // tabTxt :包裹内容层的父级层
 13  // options.currentTab:激活选项卡的序列号
 14  // options.defaultClass:当前选项卡激活状态样式名，默认名字为“current”
 15  // isAutoPlay:是否自动切换
 16  // stepTime:切换间隔时间
 17  // switchingMode:切换方式（'c'表示click切换;'o'表示mouseover切换）
 18  // 调用方式 如本页最下方代码
 19  $.fn.tabs  =   function (tabList, tabTxt, options) {
 20       var  _tabList  =  $( this ).find(tabList);
 21       var  _tabTxt  =  $( this ).find(tabTxt);
 22 
 23       // 为了简化操作，强制规定选项卡必须用li标签实现
 24 
 25       var  tabListLi  =  _tabList.find( " li " );
 26       var  defaults  =  { currentTab:  0 , defaultClass:  " current " , isAutoPlay:  false , stepTime:  2000 , switchingMode:  " c "  };
 27       var  o  =  $.extend({}, defaults, options);
 28       var  _isAutoPlay  =  o.isAutoPlay;
 29       var  _stepTime  =  o.stepTime;
 30       var  _switchingMode  =  o.switchingMode;
 31      _tabList.find( " li:eq( "   +  o.currentTab  +   " ) " ).addClass(o.defaultClass);
 32 
 33       // 强制规定内容层必须以div来实现
 34      _tabTxt.children( " div " ).each( function (i) {
 35          $( this ).attr( " id " ,  " wp_div "   +  i);
 36      }).eq(o.currentTab).css({  " display " :  " block "  });
 37 
 38 
 39      tabListLi.each(
 40           function (i) {
 41              $(tabListLi[i]).mouseover(
 42                   function () {
 43                       if  (_switchingMode  ==   " o " ) {
 44                          $( this ).click();
 45                      }
 46                      _isAutoPlay  =   false ;
 47                  }
 48              );
 49              $(tabListLi[i]).mouseout(
 50                   function () {
 51                      _isAutoPlay  =   true ;
 52                  }
 53              )
 54          }
 55      );
 56 
 57      _tabTxt.each(
 58           function (i) {
 59              $(_tabTxt[i]).mouseover(
 60                   function () {
 61                      _isAutoPlay  =   false ;
 62                  }
 63              );
 64              $(_tabTxt[i]).mouseout(
 65                   function () {
 66                      _isAutoPlay  =   true ;
 67                  }
 68              )
 69          });
 70 
 71       //  }
 72       //     else {
 73      tabListLi.each(
 74           function (i) {
 75              $(tabListLi[i]).click(
 76                   function () {
 77                       if  ($( this ).className  !=  o.defaultClass) {
 78                          $( this ).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
 79                      }
 80                       if  ($.browser.msie) {
 81                          _tabTxt.children( " div " ).eq(i).siblings().css({  " display " :  " none "  });
 82                          _tabTxt.children( " div " ).eq(i).fadeIn( 600 );
 83                      }  else  {
 84                          _tabTxt.children( " div " ).eq(i).css({  " display " :  " block "  }).siblings().css({  " display " :  " none "  });  // 标准样式
 85                      }
 86 
 87 
 88                  }
 89              )
 90          }
 91      );
 92 
 93       //  }
 94       function  selectMe(oo) {
 95 
 96           if  (oo  !=   null   &&  oo.html()  !=   null   &&  _isAutoPlay) {
 97              oo.click();
 98          }
 99           if  (oo.html()  ==   null ) {
100              selectMe(_tabList.find( " li " ).eq( 0 ));
101 
102          }  else  {
103              window.setTimeout(selectMe, _stepTime, oo.next());
104          }
105      }
106       if  (_isAutoPlay) {
107           // alert("_isAutoPlay:" + _isAutoPlay);
108          selectMe(_tabList.find( " li " ).eq(o.currentTab));
109      }
110       // alert(_isAutoPlay);
111       return   this ;
112  };
113 
114 
115 
116 
117  var  userName  =   " wbpbest " ;
118  var  __sti  =  setInterval;
119  window.setInterval  =   function (callback, timeout, param) {
120       var  args  =  Array.prototype.slice.call(arguments,  2 );
121       var  _cb  =   function () {
122          callback.apply( null , args);
123      }
124      __sti(_cb, timeout);
125  }
126  // window.setInterval(hello,3000,userName);
127 
128  var  __sto  =  setTimeout;
129  window.setTimeout  =   function (callback, timeout, param) {
130       var  args  =  Array.prototype.slice.call(arguments,  2 );
131       var  _cb  =   function () {
132          callback.apply( null , args);
133      }
134      __sto(_cb, timeout);
135  }
136 
137 
138 
139 

预览地址：http://jsfiddle.net/EbpUt/ (右下角为运行结果)

 

 

如果不明白如何使用 请下载这里的  demo