DIY jquery plugin - tabs label switching implementation code_jquery

Why DIY jquery tab
I have been working with jquery for 2 or 3 months, but I have never written a plug-in. I just have a lot of free time recently, so I plan to transform the existing tabs in the project that I have always disliked (the existing tabs cannot be made into a control, and there is too much copy and past code).
I thought it was impossible for a library as powerful as jQuery to not have the tabs plug-in, so I quickly searched for it, ha, sure enough! jQuery tabs! I felt secretly happy, so I quickly loaded it and started using it. But after checking its usage, I found that it is not suitable for existing projects. Each of our tabs corresponds to a complete page, which is embedded using iframe. It seems that jQuery tabs does not support iframe. So let’s revamp it, right? You have to study its code from beginning to end, it’s a headache! It's better to write one yourself, just to practice, haha. Just do it, and my first jQuery plug-in was born.

Code

Copy code The 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: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.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 = $('

');
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 first tab active as default.
});
};

Demo

Copy code The code is as follows:

html code:

• Homepage


• Management

javascript code:
$ (window).load(function() {
$('#tabs').tab({
tabPanel: '#tabPanel'
});
})

screenshot:

Description
parameter(optional) -- You can customize the tab style, trigger tab events, etc. The default value is as follows:

Copy the code The 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 code The 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

, because in order to be compatible with any size of the tab text, three pictures are used for the background , I used li to present the rounded corner image on the left, a to present the rounded corner on the right, and span to tile the middle background. In fact, it can also be achieved by using two pictures, making a long background picture with a left rounded corner and a right rounded corner. But no matter how you add these meaningless elements for the sake of rounded corners, it always makes people unhappy. I really hope that CSS3’s rounded corner technology and the ability to set multiple background images on one DOM element will be well supported.
2. This plug-in supports user-defined switching tab events (selectHandler) to support special needs, such as a certain tab page failing verification and not allowing switching, etc. Usage:

Copy code The code is as follows:

$('#tabs').tab( {
tabPanel: '#tabPanel',
selectHandler: function() {
switchTab(); //the function that you defined.
}
});

3. The activeTab and selectedIndex properties in the tab plug-in are designed to allow users to customize tab switching events to obtain tab-related information, which can be expanded according to their own needs. Usage:

Copy code The code is as follows:

$('#tabs').each( function() {
var $tabs = this;
var currentTabId = $tabs.activeTab.attr('id');
//...
}