jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる
caraldo.net | WebとiPhoneとロードバイクが大好き！ » プログラミング » JavaScript » jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる
前々からcookieを使用してメニューを制御したかったのですが、なかなかうまくいかず断念していたところjQueryで簡単にcookieを扱えるプラグインを発見しました。
早速試してみたところ、それらしいものが出来ましたのでプラグインの使い方と合わせて紹介していきたいと思います。
サンプルを見て頂ければ分かりますが、開閉状態をcookieによって保持するというものです。
お使いのブラウザのcookieの設定とか眺めながらご覧ください。
jquery.cookie.jsのダウンロードと使用方法
まずはjquery.cookie.jsを以下サイトよりダウンロードします。
⇒jquery.cookie.js | jQuery Plugins
これをhead内で読み込んであげると、以下の様な簡単な記述でcookieが扱えます。
$.cookie('the_cookie'); //cookieの取得
$.cookie('the_cookie', 'the_value'); //cookieをセット
$.cookie('the_cookie', 'the_value', { expires: 7 }); //cookieを有効期限を7日間でセット
$.cookie('the_cookie', '', { expires: -1 }); //cookieを削除
$.cookie('the_cookie', null); //cookieを削除
参考：Klaus Hartl - Stilbüro : Cookie Plugin for jQuery
参考：とほほのCookie入門
開閉メニューの動きの構想
jquery.cookie.jsの使用方法が分かったところで動きの構想をします。
実装したい動き
- デフォルトでは閉じている
- クリックするとアニメーションで開閉する
- リロードしても開閉状態を保持する
これを実現したいので、考えたのはcookieがあれば開いた状態にするという仕様です。
クリック時にcookieが無ければセット、既にあれば削除、更にページ読み込み時に初期状態の設定という形で実装出来そうです。
サンプルソース
1.head要素内にScriptの追加
まずはhead要素内に以下の記述を追加します。<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");&ｌt;/script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
前回同様Google AJAX APIを使用してjQueryを読みこんでいます。
3行目のパスは適宜変更してください。
2.開閉、cookie、初期状態を制御するScriptの追加
続いて根幹のScriptを記述してあげます。こんな感じで記述しています。
9行目、11行目の[show][hide]は表示、非表示をコントロールしています。
[eq]は、マッチした要素の中から指定したインデックス番号の要素を抽出する関数？です。
⇒eq(position) - jQuery 1.3.2 日本語リファレンス
20行目の[slideToggle]は
各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。slideToggle- jQuery 1.3.2 日本語リファレンス
というものです。
もっとスマートな書き方があるのかも知れませんが、現在の知識で精一杯やってみました。
3.HTMLの記述
HTML部分は以下の様にスマートな記述でいけます。- ここをクリック
- 中身
- ここをクリック
- 中身
- ここをクリック
- 中身
以上で完成です。
本当はopendd[0]~[n]というcookieが複数セットされるのを避けたかったのですが、うまく記述できませんでした＞＜
でも出来て嬉しいので公開してみました！
詳しい方アドバイスとか頂けると元気出ます！よろしくお願いします。
090304追記
cookieが複数セットされる部分に関して、コメントでアドバイス頂きまして、やり方は違うのですが閃きました！
ひとまず動作サンプルを公開します。
⇒cookieを使用して開閉を保持するメニュー（cookie一つ版）サンプル
内容については後日改めて記事にしたいと思います。
まだ無理やり感は否めないですが、cookie名ひとつで動作致します。
ありがとうございました。
090306追記
修正版を書きました。合わせてご覧ください。
⇒jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す