DIY jquery プラグイン - タブラベル切り替えの実装 code_jquery

/*
* jquery.tab
* 作成者: Winter Grass
* 日付: 2010/12/07
*/
jQuery.fn.tab = function(options) {
var settings =
{
activeTabClass: "タブ選択"、
defaultTabClass: "タブデフォルト"、
tabContainerClass: "tabContainer"、
tabPanelCls: "tabPanel"、
mouseoverTabClass: null、
hiddenTabClass: 'タブ非表示'、
tabPanel: null、
selectHandler: null、
iframeIdPrex: 'iframe_'
};

if (オプション) {
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
};
return this.each(function() {
var ts = this;
var $tabContainer = $(ts);
ts.activeTab = null;
ts.tabPanelId = null;
ts.selectedTab = null;
ts.selectedIndex = 0;

//#region 'private' メソッド
this.setActiveTab = function( tabIndex) {
if (typeof (tabIndex) != "number") {
return;
}

var selectedTab = $('li:visible', $tabContainer).eq (tabIndex );
if (selectedTab.length == 0) {
return;
}
//アクティブなタブをクリックします
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'); ') {
return;
}
ts.iframeId = settings.iframeIdPrex selectedTab.attr('id');
if ($('#' ts.iframeId).length == 0 ) {
var iframe = $('');
iframe.attr('id', ts.iframeId)
.attr('src', target)
.css({ 幅: '100%', 高さ: '100%' });
iframe.appendTo(settings.tabPanel)
}
else {
$(' #' ts.iframeId).show();
}
};
$tabContainer.addClass(settings.tabContainerClass); tabPanel) .addClass(settings.tabPanelCls);
var stopFloatDiv = $('');
stopFloatDiv.css({ クリア: '両方'、高さ: '0px' })
.insertAfter($tabContainer);
$('li', $tabContainer).each(function(i) {
var $tab = $(this);
var $link = $ ('a', $tab);
var href = $link.attr('href');
$link.attr('href', "#"); attr( 'target', href)
.addClass(settings.defaultTabClass)
.click(function(e) {
ts.selectedTab = $tab;
ts.selectedIndex = i;
if (typeof (settings.selectHandler) == "関数") {
settings.selectHandler();
}
else {
ts.setActiveTab(i) } )
});
//#endregion 'private' メソッド
ts.setActiveTab(0); //最初のタブをデフォルトとして設定します.
});
};




コードをコピーします。は次のとおりです:


$ (ウィンドウ) .load(function() {
$('#tabs').tab({
tabPanel: '#tabPanel'
});
})

{
activeTabClass: "tab-selected", //アクティブなタブの CSS
defaultTabClass: "tab-default", //非アクティブなタブの CSS
tabContainerClass: "tabContainer", / /css タブコンテナ用
tabPanelCls: "tabPanel", //iframe を含むパネル用の css
mouseoverTabClass: null, // マウスオーバー時のタブ用の css
hiddenTabClass: 'tab-hide ', // 非表示タブの CSS
tabPanelId: null, // インクルード iframe に使用されるパネル ID
selectHandler: null, // ユーザーがタブを切り替えたときのイベント ハンドラー
iframeIdPrex: 'iframe_' // iframe の ID プレックス。
}


パブリック メソッド -- setActiveTab(tabIndex) && getFrameByTabId(tabId)

$(' #tabs').setActiveTab(1); // 2 番目のタブをアクティブに設定します。
$('#tabs').getFrameByTabId("tabHome");ホームページのフレームを取得します。


その他
1. このタブは、任意のサイズと互換性があるため、3 つの dom 要素を使用します。タブのテキスト、背景には 3 つの画像が使用されています。li を使用して左側の角の丸い画像を表示し、a を使用して右側の角の丸い画像を表示し、span を使用して中央の背景をタイル表示します。実際、これは 2 つの画像を使用して、左の角が丸い、右の角が丸い長い背景画像を作成することによっても実現できます。しかし、角を丸くするためにこれらの無意味な要素をどのように追加しても、それは常に人々を不幸にします。 CSS3 の角丸テクノロジーと、1 つの DOM 要素に複数の背景画像を設定する機能が適切にサポートされることを心から願っています。

selectHandler: function() {
switchTab(); //定義した関数。
}
}); >

3. タブ プラグインの activeTab プロパティと selectedIndex プロパティは、ユーザーがタブ切り替えイベントをカスタマイズしてタブ関連の情報を取得できるように設計されており、必要に応じて拡張できます。使用法:

//...
}