Tab switching component (Tab function) instance code _ jquery

This article mainly introduces a simple Tab switching component instance. You can refer to the following annotations in the Code:

The Code is as follows:

/**
* Simple Tab switching
* The following parameters can be configured:
*/
Function Tab (){
This. config = {
Type: 'mouseover'. // The default type is to move the cursor up.
Autoplay: true, // The default value is automatic playback.
TriggerCls: '. list', // menu item
PanelCls: '. tabcontent', // content item
Index: 0, // The current index 0
SwitchTo: 0, // which item to switch
Interval: 3000, // The default playback interval is 3 seconds.
PauseOnHover: true, // whether to pause when you place the cursor. The default value is true.
Current: 'current', // Add the current item to the class name
Hidden: 'den den ', // The default class name is hidden.
Callback: null // callback function
};

This. cache = {
Timer: undefined,
Flag: true
};
}

Tab. prototype = {

Init: function (options ){
This. config = $. extend (this. config, options || {});
Var self = this,
_ Config = self. config;
Self. _ handler ();
},
_ Handler: function (){
Var self = this,
_ Config = self. config,
_ Cache = self. cache,
Len = $ (_ config. triggerCls). length;
$ (_ Config. triggerCls). unbind (_ config. type );
$ (_ Config. triggerCls). bind (_ config. type, function (){
_ Cache. timer & clearInterval (_ cache. timer );
Var index = $ (_ config. triggerCls). index (this );
! $ (This). hasClass (_ config. current )&&
$ (This). addClass (_ config. current). siblings (). removeClass (_ config. current );
$ (_ Config. panelCls). eq (index). removeClass (_ config. hidden). siblings (). addClass (_ config. hidden );

// Add the callback function after switching
_ Config. callback & $. isFunction (_ config. callback) & _ config. callback (index );
});

// The number of items to be switched to by default
If (_ config. switchTo ){
$ (_ Config. triggerCls). eq (_ config. switchTo). addClass (_ config. current). siblings (). removeClass (_ config. current );
$ (_ Config. panelCls). eq (_ config. switchTo). removeClass (_ config. hidden). siblings (). addClass (_ config. hidden );
}

// Automatic playback
If (_ config. autoplay ){
Start ();
$ (_ Config. triggerCls). hover (function (){
If (_ config. pauseOnHover ){
_ Cache. timer & clearInterval (_ cache. timer );
_ Cache. timer = undefined;
} Else {
Return;
}
}, Function (){
Start ();
});
}
Function start (){
_ Cache. timer = setInterval (autoRun, _ config. interval );
}
Function autoRun (){
If (_ config. switchTo & (_ config. switchTo = len-1 )){
If (_ cache. flag ){
_ Config. index = _ config. switchTo;
_ Cache. flag = false;
}
}
_ Config. index ++;
If (_ config. index = len ){
_ Config. index = 0;
}
$ (_ Config. triggerCls). eq (_ config. index). addClass (_ config. current). siblings (). removeClass (_ config. current );
$ (_ Config. panelCls). eq (_ config. index). removeClass (_ config. hidden). siblings (). addClass (_ config. hidden );

}
}
};

The call method on the page is as follows:

The Code is as follows:

$ (Function (){
New Tab (). init ({
SwitchTo: 1,
Callback: function (index ){
Console. log (index );
}
});
});