Jquery. tab. js tab Effect

View Code
1 /**
2 + ---------------------------------------- +
3 + TAB component v1.0
4 + Author: zzf
5 + Date: 2012-01-10
6 + ---------------------------------------- +
7 **/
8 /**
9 * tab Effect
10 * @ name jQuery. tabs
11 * @ param {object} parameters in obj format
12 * @ class
13 * @ return jQuery. tabs instance
14 */
15 jQuery (document). ready (function ($ ){
16 $. tabs = function (opts ){
17 // if you forget new when constructing an instance, the instance will be instantiated again.
18 if (! (This instanceof arguments. callee )){
19 return new arguments. callee (opts );
20}
21 // execute initialization functions similar to other languages, use apply to specify the context for this instance, and input parameters
22 this. init. apply (this, arguments );
23}
24 $. tabs. prototype = {
25 constructor: $. tabs,
26 init: function (opts ){
27 var self = this;
28 // configure attributes
29 $. extend (this ,{
30 event: 'click', // default event
31 timeout: 0, // Delay Time
32 auto :! 1, // whether automatic switch is enabled
33 interval: 500, // automatic switch time
34 selectedClass: "tabs-selected", // class name in the selected status on the tab
35 tabsSelector: "> dt a", // tab navigation Selector
36 panelsSelector: "> dd", // tab content Selector
37 selected: 0, // default selected index
38 callback: $. noop // callback function
39 },
40 opts | | {});
41 this. wrap = $ (this. selector); // The entire tab selector, which must be specified
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 // obtain the index
49 var index = self. tabs. index (this );
50 self. selected = index;
51 // The context is the current instance
52 self. hander. call (self, index)
53 });
54 // Automatic Switch
55 if (this. auto ){
56 this. start ();
57 this. tabs. die (self. event );
58 // if it is moved to the tab, automatic switch will be stopped
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 ;//~~ Is the role of the integer www.2cto.com
70 this. tabs. removeClass (this. selectedClass). eq (index). addClass (this. selectedClass); // switch the tab to navigate to the current class
71 this. panels. hide (). eq (index). show (); // hide and display the switch tab content
72 this. callback & this. callback. call (this, this. panels [index], this. tabs [index], index); // callback function
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 // Automatic Switch
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 trigger
$. Tabs ({
Selector: "# tb1 ",
Event: 'click'
});
Switch card 1 switch card 2 switch card 3 switch card 4
Content 1
2. mouseover trigger
 
$. Tabs ({
Selector: "# tb2 ",
Event: 'mouseover'
});
Switch card 1 switch card 2 switch card 3 switch card 4
Content 2
3. Delayed Switching
 
$. Tabs ({
Selector: "# fig ",
Event: 'mouseover ',
Timeout: 500
});
Switch card 1 switch card 2 switch card 3 switch card 4
Content 3
4. callback function effects
 
$. Tabs ({
Selector: "# tb4 ",
Event: 'click ',
Timeout: 500,
Callback: function (panels, tabs ){
Detail (panels).css ({'background': '# f5f5f5', color: 'red '})
}
});
Switch card 1 switch card 2 switch card 3 switch card 4
Content 4
5. Automatic Switch Effect
 
$. Tabs ({
Selector: "# tb5 ",
Event: 'click ',
Auto :! 0,
Interval: 2000
});
Switch card 1 switch card 2 switch card 3 switch card 4
Content 1

 

From Jeff. Z