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; //~~是取整的作用
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 })
4.有回调函数效果
$.tabs({
selector:"#tb4",
event:'click',
timeout:500,
callback:function (panels,tabs){
$(panels).css({'background':'#f5f5f5',color:'red'})
}
});