欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DIY jquery plugin - tabs標簽切換實現(xiàn)代碼

 更新時間：2010年12月11日 13:55:30   作者：  
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。
Why DIY jquery tab
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。
想著jQuery這么強大的庫不可能沒有tabs插件吧，趕緊搜了一下，哈，果然！jQuery tabs！心里一陣竊喜，趕緊load下來用用吧?？刹榭戳艘幌滤挠梅ǎ虐l(fā)現(xiàn)不太適用現(xiàn)有的項目耶，我們的tab每一個都對應著一個完整的頁面，是用iframe嵌入的。而jQuery tabs似乎并沒有支持iframe哦。那就改造一下吧？得從頭到尾研究它的代碼吧，頭疼！還不如自己寫一個得了，正好練練手，哈哈。說干就干，由此便誕生了我的第一個jQuery插件。

Code
復制代碼 代碼如下:

/*
* jquery.tab
* Author: 冬日小草
* 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 first tab active as default.
});
};

Demo
復制代碼 代碼如下:

html code:
<ul id="tabs">
<li id="tabBlog"><a href="blog.htm"><span>博客園</span></a></li>
<li id="tabHome"><a href="home.htm"><span>首頁</span></a></li>
<li id="tabManagement"><a href="management.htm"><span>管理</span></a></li>
</ul>
<div id="tabPanel">
</div>

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

screenshot:


Description
parameter(optional) -- 可自定義tab的樣式，觸發(fā)tab的事件等。默認值如下：

復制代碼 代碼如下:

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)
復制代碼 代碼如下:

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. 此tab用了三個dom元素<li><a><span>, 是因為為了兼容tab文字的任意大小，其背景用了三張圖片，我用了li呈現(xiàn)左邊的圓角圖片，a呈現(xiàn)右邊的圓角，而span則平鋪中間的背景。其實用兩個圖片也可以實現(xiàn)，做一個很長的有左圓角的的背景圖片和一個右圓角。但不管如何為了有圓角效果添加了這些無意義的元素，總是讓人不爽。真是希望CSS3的圓角技術(shù)和一個dom元素可設(shè)置多張背景圖能到很好的支持。
2. 此插件支持用戶自定義切換tab事件（selectHandler），以支持特殊需求，如某tab頁驗證不通過，不讓切換等。用法：
復制代碼 代碼如下:

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

3. tab插件里activeTab，selectedIndex屬性等是為了讓用戶自定義tab切換事件是能得到與tab相關(guān)的信息，可根據(jù)自己的需要擴展。用法：
復制代碼 代碼如下:

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

相關(guān)文章

最新評論