簡単にタブ＋クッキー(cookie)が実現できるjQueryプラグインをつくってみた（jQuery cookieTab）

jQueryプラグイン jQuery cookieTab

前田かおるさんサイトのお手伝いをした際に、タブを実装することになったので、昔つくったJavaScriptを元にjQueryプラグイン化してみた。

タブにしたい要素を指定するだけという、簡単実装。いやあ、jQueryって便利ですね。ってことで、さっそく解説。

jQuery cookieTab

指定した要素をタブ化するjQueryプラグイン。クッキーを利用して、表示するタブを記憶します。

準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

タブを適用させたい要素のid（id-of-tabname）を指定し、cookieTabを実行。

HTML（準備用）

上記で指定したタブ内に、タブメニューとタブパネルを配置。
タブメニューには「class="tab-menu"」を、タブパネルには「class="tab-panel"」を付与してください。どちらもオプション設定で変更可能です。

HTML（js実行時）

アクティブなタブメニューに<li class="current">が適用されます。
デフォルト設定では、先頭のパネル（#some-tabA）を表示します。

オプション

オプション項目		デフォルト値	内容
activeTab		0	初期表示しておくタブ
tabMenuElm		.tab-menu	タブメニューとする要素名（#idや.class等のCSS記法にて指定）
tabPanelElm		.tab-panel	タブパネルとする要素名（#idや.class等のCSS記法にて指定）
cookie		使用する	cookieを使用しない（false）
cookie	name	jcookieTab	jcookieTab-(id-of-tabname) = 0 の形式で書き込み
	expires	7	cookieの有効期限 [単位：日]
	path	(none)	cookieの有効範囲：設定したページのみ有効(none), サイト全体で有効（/）etc.
	secure	(none)	セキュアな通信時のみcookieを送信（true）

オプション指定方法

ライセンス

MITライセンスでの配布となります。

デザイン,ユーザビリティ,マーケティングなどの観点からwebについて綴っていきます