2012.11.14
STAFF BLOG
スタッフブログ
TECHNICAL
テクログ
こんにちは。
先日jQueryのプラグインで、手軽かつ面白いかなと思うものを見つけました。
ご存知の方はご容赦ください。
?
その名も「jquery.cookie.js」
JavaScriptで、簡単に！クッキーを扱えるプラグインです。
?
今回はこれを用いて、
「アコーディオンの開閉状態をクッキーで記憶しておく」サンプルを作成してみました。
アコーディオンを開いた状態でページを遷移（更新する等）しても
開きっぱなしにしておけるアコーディオンです。
?
画像やCSSはないのでさびしいですが、
サンプルはこちら
（GoogleChromeでしか試してないので、動かなかったらすみません…）
?
↓参考にさせて頂いたサイトはこちら↓
『jQueryを使ったスライド開閉メニューをCookieでコントロールする』
では、解説していきます。
?
―――――――――――――――――――――――――――――――――――
まずはjquery.cookie.jsの使い方です。
*********************************
1.クッキーに値を保存する
$.cookie(“クッキーの名前”, “値”);
2.クッキーの値を呼び出す
$.cookie(“クッキーの名前”);
3.クッキーを削除する
$.cookie(“クッキーの名前”, null);
*********************************
以上です。簡単ですよねヽ(´▽｀)ノ
?
保存する際、第3引数にオプションを持たせることで、保存日数等を指定したりもできるようです。
$.cookie(“クッキーの名前”, “値”, {expires: 7});
?
※注意 – クッキー削除時の不具合※
上記の削除方法だと、クッキーが削除されない場合があるようです。
その場合下記に変更すれば良いみたいです。
$.cookie(“XXXXX”, “”,{,expires:-1});
クッキーの値を空にして、有効期限を過去に指定しています。
?
↓参考サイト↓
『jquery.cookie｜null指定でクッキー削除されないケースあり』
?
―――――――――――――――――――――――――――――――――――
以上を踏まえまして、アコーディオンを実装してみます。
?
＜html＞
アコーディオンタイトル0
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
アコーディオンタイトル1
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
アコーディオンタイトル2
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
アコーディオンタイトル3
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
アコーディオンタイトル4
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
-
-
- ?
- コンテンツ
-
※クリックするアコーディオンタイトルの箇所にだけ、クラスを振っています。
?
＜css＞
.accordion_title {
?cursor:pointer;
}
※カーソルをポインタにするCSSのみ記述しています。
?
＜JS（必要なファイルを読み込む）＞
使うのは、2つだけです。
・通常のjQueryライブラリ（上）、
・jquery.cookie.js（下）
?
※2012/11現在、jquery.cookie.jsは配布元に置いていない(？)ようです。
下記サイトを参考に入手できます。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1079503625
?
ここまでがアコーディオンの準備。
次がいよいよ、アコーディオンの動きと、クッキーによる開閉記憶の処理になります。
?
＜JS（アコーディオン処理を書く）＞
$(function() {
?/**************************/
?/*** クッキーの値を設定 ***/
?/**************************/
?var cookie = "";
?//クッキーが存在する場合、変数に値を設定
?if($.cookie("accordion") && $.cookie("accordion") != null) {
??var cookie = $.cookie("accordion");
?}
?/**************************************/
?/*** アコーディオンをひとつずつ設定 ***/
?/**************************************/
?$(".accordion_title").each(function(index) {
??/*** クッキー情報から、はじめの開閉状態を判断 ***/
??//クッキーが存在しない or クッキーにアコーディオンナンバーがない場合、閉じる
??if($.cookie("accordion") == null || cookie.indexOf(index) == -1) {
???$(this).next().hide();
??//クッキーにアコーディオンナンバーがある場合、開ける
??} else {
???$(this).addClass("opend");
???$(this).next().show();
??}
??/*** アコーディオンのクリックイベントを登録 ***/
??$(this).click(function() {
???//「opened」クラスがあれば削除、なければ付与
???$(this).toggleClass("opend")
???//アコーディオンを開閉する
???$(this).next().slideToggle();
???//アコーディオンを開いた（「opened」クラスを付与した）場合、
???//クッキーにアコーディオンナンバーを登録
???if($(this).hasClass("opend")) {
????cookie += index;
????$.cookie("accordion", cookie);
???//アコーディオンを閉じた（「opened」クラスを削除した）場合、
???//クッキーからアコーディオンナンバーを削除
???} else {
????cookie = cookie.replace(index, "");
????//クッキーにアコーディオンナンバーがない場合、クッキーを削除
????if(cookie.length == 0) {
?????$.cookie("accordion", "", {expires:-1});
????} else {
?????$.cookie("accordion", cookie);
????}
???}
??});
?});
});
$(“.accordion_title”).each(function(index) {…});
によって、一つ一つのアコーディオンタイトルに「0,1,2…」とナンバーを振っています。
「そのナンバーがクッキーに保存されているかどうか」で、アコーディオンの開閉状態を判断しています。
?
処理の流れは以下になります。
?
1.ページをロード
・クッキーの有無を判断
・クッキーがあれば、クッキーに保存されているナンバーを読み込む
・読み込んだナンバーを元に、アコーディオンの開閉状態を設定する
?
2.アコーディオンを開ける
・クッキーにナンバーを保存（数字の『文字列』としてクッキーに保存）
例）
「2」「0」「4」の順に開いた場合、
cookie += “2”;
$.cookie(“accordion”, cookie);?
cookie += “0”;
$.cookie(“accordion”, cookie);
cookie += “4”;
$.cookie(“accordion”, cookie);?
// $.cookie(“accordion”)は “204” になります。
?
3.アコーディオンを閉じる → クッキーからナンバーを削除
例）
「0」「2」の順に閉じた場合、
cookie = cookie.replace(“0”, “”);
$.cookie(“accordion”, cookie);?
cookie = cookie.replace(“2”, “”);
$.cookie(“accordion”, cookie);
// $.cookie(“accordion”)は “4” になります。
?
―――――――――――――――――――――――――――――――――――
以上で、開閉状態を記憶するアコーディオンの完成です！
?
クッキーの保持状態の確認用として、
ページロード時と開閉時にアラートを出すサンプルも用意してみましたので、よければご覧になってください。
?
?
※最後にご注意※
このサンプルでは、アコーディオンタイトルが10個以内（「0」～「9」）のものを想定しています。
「10」以上になると、クッキーからナンバーを削除する際、
「0」と「1」～「9」の区別がつかなくなるためです。
?
10個以上を実装する場合、クッキーに保存する文字列が以下になるよう処理を変更します。
変更前 ： “0121011”
変更後 ： “[0][1][2][10][11]”
?
これでクッキーから削除する際も、以下のようにすれば問題なく動作するようになります。
cookie = cookie.replace(“[0]”, “”);
（参考サイトでは後者になっています）
?
―――――――――――――――――――――――――――――――――――
cookieがjsで簡単に扱えることが伝われば幸いです。
アコーディオン以外にも広く応用できるだろうと思います。
機会があれば、是非使ってみてください！
うっちーでした。
