jQuery Cookie を使ってタブ切り替え状態を保持する方法

以前作成したタブ切り替えのスクリプトを拡張し、リロードや別ページから戻った場合でもアクティブになっているタブをアクティブのままにしておく、ということがしたくなったのですが、どうやらjQuery Cookieというライブラリを使えば出来そうだったので、実際にやってみました。

jQuery Coonkie

ダウンロード

carhartl/jquery-cookie GitHub
https://github.com/carhartl/jquery-cookie

上記URLから、jquery.cookie.js をダウンロードします。

「Download ZIP」をクリックし、zipファイルをダウンロード。
解凍した [src] ディレクトリ以下に jquery.cookie.js は格納されています。

HTML ヘッダ

[html]


[/html]

↑ 読み込ませます。必ずjQuery本体よりもあとに読み込ませてください。

Script

以前書いたスクリプトを拡張して書いてみます。

詳細はこちらから。

HTML

[html]

• タブ１
• タブ２
• タブ３
• タブ４
• タブ５

[/html]

CSS

[css]
ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#tab li{
padding: 10px;
background-color: #eee;
border: 1px solid #ccc;
float: left;
}

#tab li.chose{
background-color: #fff;
}

.hide{
display: none;
}
[/css]

JavaScript

「クッキー保存されている or いない場合」及び「クリックされた場合」のスクリプトが必要になります。
タブ切り替え処理は共通化できるので、function() にまとめてみました。

[js]

[/js]

並んでいるダブのインデックス番号を取得し、変数 numに代入し、対応するインデックス番号の内容を表示させる、という処理を行っています。

インデックス番号は基本的に 0番からスタートします。
この場合「タブ１」がインデックス番号「0番」となります。

★1 箇所で、クッキーが保存されていれば、その内容をインデックス番号用変数（num）に代入します。

★2 箇所で 0 を代入しているのは、全く初めてのアクセスの場合や、クッキーをクリアされたなどの場合にデフォルトで表示させるインデックス番号を 0 とするためです。
なので、1でも2でも構いません。

★3 箇所で、取得したインデックス番号をクッキーに保存しています。

仕様

最後に、クッキーをセットする箇所の第三引数の仕様です。

[js]
$.cookie('num', num, {
expires: 2,
path: '/',
domain: 'wataame.sumomo.ne.jp',
secure: true
});
[/js]

• expires: 2,　：　num の内容は、2日後に自動的にブラウザから消去
• path: '/',　：　ルートディレクトリ(/)以下の全てのページで num が読み込める
• domain: 'wataame.sumomo.ne.jp',　：　num は、指定したドメイン以下でのみ、読み込める
• secure: true　：　https環境でのみ、numに値が保存される

判ってしまえば、かなり簡単に導入できてしまいました。
ライブラリって素敵。

-Javascript,jQuery
-javascript, jquery, jquery.cookie, js, タブ, タブ切り替え