jquery.tab.js選項卡效果

  View Code
 1 /**
 2  + ---------------------------------------- +
 3  + 索引標籤群組件v1.0
 4  + Author: zzf
 5  + Date: 2012-01-10
 6  + ---------------------------------------- +
 7 **/
 8 /**
 9  * 選項卡tab效果
10  * @name jQuery.tabs
11  * @param {object} obj 對象形式的參數
12  * @class
13  * @return  jQuery.tabs instance
14  */
15 jQuery(document).ready(function($) {
16     $.tabs = function(opts) {
17         //如果在構造執行個體的時候忘了new,就重新執行個體化
18         if (! (this instanceof arguments.callee)) {
19             return new arguments.callee(opts);
20         }
21         //執行類似其他語言的初始化函數，利用apply指定上下文(context)為該執行個體，並且傳入參數
22         this.init.apply(this, arguments);
23     }
24     $.tabs.prototype = {
25         constructor: $.tabs,
26         init: function(opts) {
27             var self = this;
28             //配置屬性
29             $.extend(this, {
30                 event: 'click',//預設事件
31                 timeout: 0,//延遲時間
32                 auto: !1,//是否自動切換
33                 interval: 500,//自動切換時間
34                 selectedClass: "tabs-selected",//選項卡選中狀態的類名
35                 tabsSelector: ">dt a",//選項卡導航選取器
36                 panelsSelector: ">dd",//選項卡內容選取器
37                 selected: 0,//預設選中索引
38                 callback: $.noop //回呼函數
39             },
40             opts || {});
41             this.wrap = $(this.selector); //整個索引標籤選取器，必須指定
42             this.tabs = this.wrap.find(this.tabsSelector);
43             this.panels = this.wrap.find(this.panelsSelector);
44             this.timer = null;
45             this.select(this.selected);
46             this.tabs.live(self.event,
47             function() {
48                 //擷取索引
49                 var index = self.tabs.index(this);
50                 self.selected = index;
51                 //上下文為當前執行個體
52                 self.hander.call(self, index)
53             });
54             //是否自動切換
55             if (this.auto) {
56                 this.start();
57                 this.tabs.die(self.event);
58                 //如果移到選項卡上就停止自動切換
59                 self.panels.hover(function() {
60                     clearInterval(self.timer);
61                     self.timer = null;
62                 },
63                 function() {
64                     self.start();
65                 });
66             }
67         },
68         select: function(index) {
69             index = ~~index; //~~是取整的作用www.2cto.com
70             this.tabs.removeClass(this.selectedClass).eq(index).addClass(this.selectedClass); //切換選項卡導航當前類
71             this.panels.hide().eq(index).show();//切換選項卡內容隱藏顯示
72             this.callback && this.callback.call(this, this.panels[index], this.tabs[index], index); //回呼函數
73         },
74         hander: function(index) {
75             var self = this;
76             this.timeout ?
77             setTimeout(function() {
78                 self.select(index);
79             },self.timeout) :
80             (function() {
81                 self.select(index);
82             })()
83         },
84         start: function() {
85             var self = this;
86             if (!this.auto) return;
87             this.timer = setInterval(function() {
88                 self.autoRun.call(self)
89             },
90             this.interval);
91         },
92         //自動切換
93         autoRun: function() {
94             this.selected++;
95             if (this.selected >= this.tabs.length) this.selected = 0;
96             this.hander(this.selected);
97         }
98     }
99 })

1.click觸發
 $.tabs({
  selector:"#tb1",
  event:'click'
 });
切換卡1切換卡2切換卡3切換卡4
內容1
2.mouseover觸發
 
 $.tabs({
  selector:"#tb2",
  event:'mouseover'
 });
切換卡1切換卡2切換卡3切換卡4
內容2
3.延遲切換
 
 $.tabs({
  selector:"#tb3",
  event:'mouseover',
  timeout:500
 });
切換卡1切換卡2切換卡3切換卡4
內容3
4.有回呼函數效果
 
 $.tabs({
  selector:"#tb4",
  event:'click',
  timeout:500,
  callback:function (panels,tabs){
     $(panels).css({'background':'#f5f5f5',color:'red'})
  }
 });
切換卡1切換卡2切換卡3切換卡4
內容4
5.自動轉場效果
 
 $.tabs({
  selector:"#tb5",
  event:'click',
  auto : !0,
  interval:2000
 });
切換卡1切換卡2切換卡3切換卡4
內容1

 

摘自  Jeff.Z