JQueryTab effect code ultimate version _ jquery

Source: Internet
Author: User
A complete method has been encapsulated in the simplified version of the tabs produced by JQuery. This section describes a tab effect implemented based on JQuery. It focuses on the fact that there is no inline event handler in HTML, but is defined in the js file to separate behavior and structure. In actual application, you can add N similar tabs to ensure the integrity of the structure code of the tab module, you do not need to manually bind an event handler to HTML and add an ID to the content layer to hide the display.
Here, I have made some changes, added the function of automatically switching tabs, and clicked the corresponding tab or put the corresponding parameters. At the same time, it still supports multiple calls.
Now, I have pasted the code and shared it with many bloggers.
This is a js script.

The Code is as follows:


/* Jquery-fn-accordion v0
* Based on jQuery JavaScript Library v3
* Http://jquery.com/
*
* The author of the following code: miqi2214, wbpbest
* Blog: eycbest.cnblogs.com, miqi2214.cnblogs.com
* Date: 2010-3-10
*/
// Note: If a debugging error occurs, check the jquery version number that you reference. The currently referenced version is 1.3.
// Parameter description:
// TabList: parent layer of the package Tab
// TabTxt: parent layer of the Package content Layer
// Options. currentTab: Serial number of the activation Tab
// Options. defaultClass: name of the activation status style on the current tab. The default name is "current"
// IsAutoPlay: whether to automatically switch
// StepTime: Switching Interval
// SwitchingMode: Switch Mode ('C' indicates click switch; 'O' indicates mouseover switch)
// Call method, as shown in the code at the bottom of this page
$. Fn. tabs = function (tabList, tabTxt, options ){
Var _ tabList = $ (this). find (tabList );
Var _ tabTxt = $ (this). find (tabTxt );
// To simplify the operation, the mandatory tab must be implemented using the li label.
Var tabListLi = _ tabList. find ("li ");
Var defaults = {currentTab: 0, defaultClass: "current", isAutoPlay: false, step time: 2000, switchingMode: "c "};
Var o = $. extend ({}, defaults, options );
Var _ isAutoPlay = o. isAutoPlay;
Var _ stepTime = o. stepTime;
Var _ switchingMode = o. switchingMode;
_ TabList. find ("li: eq (" + o. currentTab + ")"). addClass (o. defaultClass );
// Enforce that the content layer must be implemented using p
_ TabTxt. children ("p"). each (function (I ){
$ (This). attr ("id", "wp_p" + I );
Registry.eq(o.currenttab).css ({"display": "block "});
TabListLi. each (
Function (I ){
$ (TabListLi [I]). mouseover (
Function (){
If (_ switchingMode = "o "){
$ (This). click ();
}
_ IsAutoPlay = false;
}
);
$ (TabListLi [I]). mouseout (
Function (){
_ IsAutoPlay = true;
}
)
}
);
_ TabTxt. each (
Function (I ){
$ (_ TabTxt [I]). mouseover (
Function (){
_ IsAutoPlay = false;
}
);
$ (_ TabTxt [I]). mouseout (
Function (){
_ IsAutoPlay = true;
}
)
});
//}
// Else {
TabListLi. each (
Function (I ){
$ (TabListLi [I]). click (
Function (){
If ($ (this). className! = O. defaultClass ){
$ (This). addClass (o. defaultClass). siblings (). removeClass (o. defaultClass );
}
If ($. browser. msie ){
_ TabTxt. children ("p" ).eq( I ).siblings().css ({"display": "none "});
_ TabTxt. children ("p"). eq (I). fadeIn (600 );
} Else {
_ TabTxt. children ("p" ).eq( I ).css ({"display": "block" }).siblings().css ({"display": "none"}); // standard style
}
}
)
}
);
//}
Function selectMe (oo ){
If (oo! = Null & oo.html ()! = Null & _ isAutoPlay ){
Oo. click ();
}
If (oo.html () = null ){
SelectMe (_ tabList. find ("li"). eq (0 ));
} Else {
Window. setTimeout (selectMe, _ stepTime, oo. next ());
}
}
If (_ isAutoPlay ){
// Alert ("_ isAutoPlay:" + _ isAutoPlay );
SelectMe (_ tabList. find ("li"). eq (o. currentTab ));
}
// Alert (_ isAutoPlay );
Return this;
};
Var userName = "wbpbest ";
Var _ sti = setInterval;
Window. setInterval = function (callback, timeout, param ){
Var args = Array. prototype. slice. call (arguments, 2 );
Var _ cb = function (){
Callback. apply (null, args );
}
_ Sti (_ cb, timeout );
}
// Window. setInterval (hello, 3000, userName );
Var _ sto = setTimeout;
Window. setTimeout = function (callback, timeout, param ){
Var args = Array. prototype. slice. call (arguments, 2 );
Var _ cb = function (){
Callback. apply (null, args );
}
_ Sto (_ cb, timeout );
}


Demo address: http://demo.jb51.net/js/wbpbest/index.html

Packaging http://www.jb51.net/jiaoben/25569.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.