jQueryを使ってタブメニュープラグインを作る(Cookie Version)

March 25, 2012

jQueryを使ったタブメニューの第3回目です。

前回はタブメニューを使い回したり、1ページ内で複数のタブに対応させるためにプラグイン化するという記事を書きました。今回はこのタブの状態をリロード時や、他のページから戻ってきた時にタブの状態を維持するように改造します。

タブの状態を維持するにはCookieを使いますが、jQueryにはCookieを簡単に使えるようにするjQuery Cookieと言うプラグインがありますので、これを利用してます。

前回までの記事をご覧になっていない場合は先にご覧になっていただければと思います。

今回のコードの完成形です。

jQuery Code

(function($) {
	$.fn.tabs = function(options) {
		var o = $.extend({
			targetID: '#tab',
			tabElement: '.tab-list li',
			boxElement: '.tab-box'
		}, options);
		$(o.tabElement, o.targetID).each(function() {
			var selectedTab = $.cookie(o.targetID + 'selectedTab');
			if (selectedTab) {
				$(o.boxElement, o.targetID).not(':eq(' +selectedTab+')').hide();
				$(o.tabElement, o.targetID).eq(selectedTab).addClass('selected');				
			} else {
				$(o.boxElement, o.targetID).not(':first').hide();
				$(o.tabElement, o.targetID).eq(0).addClass('selected');
			}
			$(this).click(function(){
				var tabIndex = $(o.tabElement, o.targetID).index(this);
				$.cookie(o.targetID + 'selectedTab', tabIndex);
				$(o.tabElement, o.targetID).removeClass('selected');
				$(this).addClass('selected');
				$(o.boxElement, o.targetID).hide().eq(tabIndex).addClass('selected').fadeIn();
			});
		});
		return this;
	};
})(jQuery);

変更になっている箇所は10行目〜17行目と21行目です。あとは変わっていません。

jQueryでCookieを使うにはjQuery Cookieプラグインを読み込ませ、$.cookie('cookieName', 'value')でCookieをセット、$.cookie('cookieName')でCookieを取得します。
まず21行目でクリックされたタブのindexをCookieの値として保存します。複数のタブで使用されることを考慮してCookieの名前を『タブの名前＋selectedTab』とします。

$.cookie(o.targetID + 'selectedTab', tabIndex);

div#tabs1にタブを設定した場合で1番目のタブがクリックされれば#tabs1selectedTabと言う名前に0が入ります。2番目のタブがクリックされれば#tabs1selectedTabに1が入ります。
この値をフックにして最初に表示される状態をif文で振り分けます。

var selectedTab = $.cookie(o.targetID + 'selectedTab');
	if (selectedTab) {
		$(o.boxElement, o.targetID).not(':eq(' +selectedTab+')').hide();
		$(o.tabElement, o.targetID).eq(selectedTab).addClass('selected');				
	} else {
		$(o.boxElement, o.targetID).not(':first').hide();
		$(o.tabElement, o.targetID).eq(0).addClass('selected');
}

1行目でCookieの値を取得します。Cookieに値が入っていなければ1番目のタブが選択された状態にし、Cookieに値が入っていればその番号のタブにclass="selected"を付加し、その番号以外のdivを非表示にします。

以上ですが、注意しなければならないのがjQueryのバージョン。このプラグインを書いている時に使っていたjQueryのバージョンが1.2系でした。その際、eqフィルタにselectedTabの値を渡しても選択したタブ以降の全てのタブにaddClassしてしまうバグに遭遇しました。
1.2系のjQueryを利用する場合は、eqフィルタを使わずにfilterを利用すれば問題ありません。

$(o.tabElement, o.targetID).eq(selectedTab).addClass('selected');
//上記コードを下記コードに書き換える
$(o.tabElement, o.targetID).filter(':eq(' +selectedTab+')').addClass('selected');

View Demo