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 

 

如果不会使用 请下载这里的  demo

 

转载于:https://www.cnblogs.com/jcomet/archive/2010/03/29/1700052.html