Why DIY jquery tab
Contact jquery 2, 3 months, has never written a plugin. Just recently, I intend to change the existing tab of the project which is not pleasing to the eye (the existing tab can not be made into a control, too much copy,past code).
Think of jquery such a powerful library can not have tabs plug-in bar, hurriedly searched a bit, ha, sure enough! JQuery tabs! In the heart a burst of joy, hurriedly load down use it. You can look at its usage, only to find that it is not very suitable for the existing project Yes, our tab each corresponds to a complete page, is embedded with an IFRAME. and jquery tabs does not seem to support the IFRAME Oh. Well, how about a makeover? You have to study it from beginning to end, headaches! I might as well write one, just practice practicing, haha. Say dry, then born my first jquery plugin.
Code
Copy Code code 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:visible ', $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: ' 100% ', Height: ' 100% '});
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);
$ (' Li ', $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-A-tab active as default.
});
};
Demo
Copy Code code as follows:
HTML code:
<ul id= "Tabs" >
<li id= "Tabblog" ><a href= "blog.htm" ><span> Blog Park </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)--customizable tab style, Triggers tab events, and so on. The default values are as follows:
Copy Code code 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 while 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 an IFRAME by tab ID.
};
Public methods--SetActiveTab (TabIndex) && getframebytabid (tabid)
Copy Code code 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 element <li><a><span>, because in order to be compatible with the tab text of any size, its background with three pictures, I used Li to render the left corner of the picture, a to render the right corner of the fillet, span, however, tiles the middle background. In fact, with two pictures can also be achieved, make a very long with the left corner of the background picture and a right rounded corner. But no matter how you add these meaningless elements in order to have rounded effects, it's always annoying. I really hope CSS3 's fillet technology and a DOM element can be set to a number of background images to support very well.
2. This plugin supports user-defined Toggle tab Events (Selecthandler) to support special requirements, such as a tab page validation does not pass, not allow switching. Usage:
Copy Code code as follows:
$ (' #tabs '). Tab ({
TabPanel: ' #tabPanel ',
Selecthandler:function () {
Switchtab (); The function that is you defined.
}
});
3. The tab plug-in Activetab,selectedindex property is to allow users to customize the tab switch event is to be able to get the information related to the tab, can be expanded according to their needs. Usage:
Copy Code code as follows:
$ (' #tabs '). each (function () {
var $tabs = this;
var currenttabid = $tabs. Activetab.attr (' id ');
//...
}
