jquery.tab.js选项卡效果

来源:岁月联盟 编辑:exp 时间:2012-03-23

  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