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

jquery タブを DIY する理由
私は 2 ～ 3 か月間 jquery を使ってきましたが、プラグインを書いたことはありません。最近自由時間がたくさんあるので、ずっと嫌いだったプロジェクト内の既存のタブを変換する予定です (既存のタブをコントロールにすることはできず、コピー アンド ペーストのコードが多すぎます)。
jQuery のような強力なライブラリに tabs プラグインがないのはありえないと思ったので、急いで探してみました。はは、確かに! jQueryタブ！密かに嬉しくなったので、早速ロードして使い始めました。しかし、その使用法を確認したところ、これは既存のプロジェクトには適していないことがわかりました。各タブは、iframe を使用して埋め込まれた完全なページに対応しています。 jQueryタブはiframeをサポートしていないようです。じゃあ、作り直してみましょうか？コードを最初から最後まで勉強しなければならないので、頭が痛くなります。練習のために自分で書いたほうがいいですよ（笑）。それを実行するだけで、私の最初の 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); //最初のタブをデフォルトとして設定します.
});
};




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

html コード:

• ;ブログ ガーデン


• ホームページ< ;


• 管理<

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

スクリーンショット:

説明 パラメータ (オプション) -- タブのスタイルをカスタマイズしたり、タブ イベントをトリガーしたりできます。デフォルト値は次のとおりです:

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

var settings =

{
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)

;

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

setAcitveTab: タブ インデックスでアクティブなタブを設定します。

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


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

2. このプラグインは、特定のタブ ページが検証に失敗し、切り替えが許可されないなどの特別なニーズをサポートするために、ユーザー定義のタブ切り替えイベント (selectHandler) をサポートします。使用法:

コードをコピー コードは次のとおりです: $('#tabs') .tab( {

tabPanel: '#tabPanel',

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

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

コードをコピー

コードは次のとおりです: $('#tabs') .each( function() { var $tabs = this;

var currentTabId = $tabs.activeTab.attr('id');

//...
}