According to the Tab option box implemented by className, multiple tabs are supported. For more information, see.
The Code is as follows:
/**
* JQuery plugin
* Author: purecolor@foxmail.com
* Date: 2011-02-25
* Params:
* Defaults :{
CurrentClass: current style,
Trigger: trigger method,
CallBack: callBack function,
Auto: whether to run automatically,
Detay: Delay Time,
Index: current location
*}
* Return: null
* Note: Tab option box plug-in
*
*/
(Function ($ ){
$. Fn. extend ({
TabBuild: function (options ){
Return $ (this). each (function (){
Var defaults = {
CurrentClass: "currentOne ",
Trigger: "mouseover ",
CallBack: null,
Auto: true,
Detay: 3000,
Index: 0
}
Var params = $. extend (defaults, options );
Var $ this = $ (this );
Var items = $ ('. tab-menu', $ this), I = 0;
Var autoTimer, curro = 0;
Items. each (function (){
$ (This). data ('lvl', I );
If (I = params. index ){
$ ('. Tab-content', $ this). eq (I). show ();
$ (This). addClass (params. currentClass );
} Else {
$ ('. Tab-content', $ this). eq (I). hide ();
}
I ++;
$ (This). bind (params. trigger, function (e ){
// Remove automatic run
If (params. auto ){
If (autoTimer) clearInterval (autoTimer );
}
Move ($ (this). data ("lvl "));
// Clear bubbles
If (e. stopPropagation ){
E. stopPropagation (); // for Mozilla and Opera
}
Else if (window. event ){
Window. event. cancelBubble = true; // for IE
}
});
});
// Mobile playback
Function move (I ){
// Remove the previous Effect
Items. eq (params. index). removeClass (params. currentClass );
$ ('. Tab-content', $ this). eq (params. index). hide ();
// Move to the current location
Items. eq (I). addClass (params. currentClass );
$ ('. Tab-content', $ this). eq (I). show ();
Params. index = I;
}
// Run automatically
Function auto (){
If (params. auto ){
AutoTimer = setInterval (function (){
Curro = (params. index> = 2 )? 0 :( params. index + 1 );
Move (curro );
}, Params. detay );
} Else {
If (autoTimer) clearInterval (autoTimer );
}
}
Auto ();
});
}
});
}) (JQuery );