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

  • 2011/04/03

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ライセンスでの配布となります。

jQuery crossFader