DIY jquery plugin-tabs Label Switch implementation code

Why DIY jquery tab
I have been in contact with jquery for 2 or 3 months, and I have never touched the plug-in. Just recently, I was relatively idle, so I planned to rebuild the existing tabs in projects that were not pleasing to the eye (the existing tabs were not made into a control, and there were too many copy and past code ).
I think there is no tabs plug-in for such a powerful library of jQuery. I have to search for it! JQuery tabs! I was so happy that I had to load it and use it. You can check its usage to find that it is not suitable for existing projects. Each of our tabs corresponds to a complete page, which is embedded with iframe. JQuery tabs does not seem to support iframe. So let's change it? You have to study its code from beginning to end, which is a headache! It's better to write it on your own. It's just a good trainer, haha. As long as you do it, my first jQuery plug-in was born.

Code
Copy codeThe Code is as follows:
/*
* Jquery. tab
* Author: winter grass
* Date: 2010/12/07
*/
JQuery. fn. tab = function (options ){
Var settings =
{
ActiveTabClass: "tab-selected ",
DefaultTabClass: "tab-default ",
TabContainerClass: "tabContainer ",
TabPanelCls: "tabPanel ",
MouseoverTabClass: null,
HiddenTabClass: 'tab-hide ',
TabPanel: null,
SelectHandler: null,
IframeIdPrex: 'iframe _'
};

If (options ){
JQuery. extend (settings, options );
}
// # Region public events
$. Fn. setActiveTab = function (tabIndex ){
If (tabIndex ){
Return this. each (function (){
This. setActiveTab (tabIndex );
})
}
};
$. Fn. getFrameByTabId = function (tabId ){
If (tabId ){
Var iframeId = settings. iframeIdPrex + tabId;
Return frames [iframeId];
}
Return null;
};
// # Endregion public events
Return this. each (function (){
Var ts = this;
Var $ tabContainer = $ (ts );
Ts. activeTab = null;
Ts. tabPanelId = null;
Ts. selectedTab = null;
Ts. selectedIndex = 0;
Ts. iframeId = null;

// # Region 'private' methods
This. setActiveTab = function (tabIndex ){
If (typeof (tabIndex )! = "Number "){
Return;
}

Var selectedTab = $ ('li: visable', $ tabContainer). eq (tabIndex );
If (selectedTab. length = 0 ){
Return;
}
// Click the active tab
If (ts. iframeId = settings. iframeIdPrex + selectedTab. attr ('id ')){
Return;
}
Else {
If (ts. iframeId! = Null ){
// $ (Frames [activeTabId]). hide ();
$ ("Iframe"). hide ();
}
}
$ ('.' + Settings. activeTabClass, $ tabContainer). removeClass (settings. activeTabClass );
Ts. activeTab = selectedTab;
Ts. activeTab. addClass (settings. activeTabClass );
Var target = ts. activeTab. attr ('target ');
If (typeof (target )! = 'String '){
Return;
}
Ts. iframeId = settings. iframeIdPrex + selectedTab. attr ('id ');
If ($ ('#' + ts. iframeId). length = 0 ){
Var iframe = $ ('<iframe> </iframe> ');
Iframe. attr ('id', ts. iframeId)
. Attr ('src', target)
. Css ({width: '000000', height: '000000 '});
Iframe. appendTo (settings. tabPanel );
}
Else {
$ ('#' + Ts. iframeId). show ();
}
};
Var initialTabs = function (){
$ TabContainer. addClass (settings. tabContainerClass );
$ (Settings. tabPanel). addClass (settings. tabPanelCls );
Var stopFloatDiv =$ ('<div> </div> ');
StopFloatDiv.css ({clear: 'both ', height: '0px '})
. InsertAfter ($ tabContainer );
$ ('Lil', $ tabContainer). each (function (I ){
Var $ tab = $ (this );
Var $ link = $ ('A', $ tab );
Var href = $ link. attr ('href ');
$ Link. attr ('href ',"#");
$ Tab. attr ('target', href)
. AddClass (settings. defaultTabClass)
. Click (function (e ){
Ts. selectedTab = $ tab;
Ts. selectedIndex = I;
If (typeof (settings. selectHandler) = "function "){
Settings. selectHandler ();
}
Else {
Ts. setActiveTab (I );
}
})
});
};
// # Endregion 'private' methods
InitialTabs ();
Ts. setActiveTab (0); // set first tab active as default.
});
};

Demo
Copy codeThe Code is as follows:
Html code:
<Ul id = "tabs">
<Li id = "tabBlog"> <a href = "blog.htm"> <span> blog </span> </a> </li>
<Li id = "tabHome"> <a href = "home.htm"> <span> Home </span> </a> </li>
<Li id = "tabManagement"> <a href = "management.htm"> <span> management </span> </a> </li>
</Ul>
<Div id = "tabPanel">
</Div>

Javascript code:
$ (Window). load (function (){
$ ('# Tabs'). tab ({
TabPanel: '# tabPanel'
});
})

Screenshot:

Description
Parameter (optional)-You can customize the tab style and trigger tab events. The default value is as follows:
Copy codeThe Code is as follows:
Var settings =
{
ActiveTabClass: "tab-selected", // css for active tab
DefaultTabClass: "tab-default", // css for inactive tabs
TabContainerClass: "tabContainer", // css for the tab container
TabPanelCls: "tabPanel", // css for the panel that contains the iframe
MouseoverTabClass: null, // css for tab when mouse over it
HiddenTabClass: 'tab-hide ', // css for the hidden tab
TabPanelId: null, // the panel id which is used for include iframe
SelectHandler: null, // event handler when user switch tab
IframeIdPrex: 'iframe _ '// the id prex for iframe, it's useful for getting iframe by tab id.
};

Public methods -- setActiveTab (tabIndex) & getFrameByTabId (tabId)
Copy codeThe Code is as follows:
SetAcitveTab: set active tab by tab index.
$ ('# Tabs'). setActiveTab (1); // set the second tab active.
GetFrameByTabId: get frame for a specific tab.
$ ('# Tabs'). getFrameByTabId ("tabHome"); // get the frame for home page.

Others
1. this tab uses three dom elements <li> <a> <span> because it uses three images in the background to be compatible with any size of the tab text, I used li to show the rounded corner image on the left. a shows the rounded corner on the right, while span is the middle background. You can also use two images to create a very long background image with a left rounded corner and a right rounded corner. However, adding meaningless elements to a rounded corner is always unpleasant. I really hope that the corner Technology of CSS3 and a dom element can be well supported by setting multiple background images.
2. This plug-in allows you to customize the selectHandler event to support special requirements, such as a tab page that fails verification and does not allow switching. Usage:
Copy codeThe Code is as follows:
$ ('# Tabs'). tab ({
TabPanel: '# tabPanel ',
SelectHandler: function (){
SwitchTab (); // the function that you defined.
}
});

3. The activeTab and selectedIndex attributes in the tab plug-in are used to allow users to customize the tab switching event to obtain information related to the tab, which can be expanded as needed. Usage:
Copy codeThe Code is as follows:
$ ('# Tabs'). each (function (){
Var $ tabs = this;
Var currentTabId = $ tabs. activeTab. attr ('id ');
//...
}