前々から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っぽく書き直す
このエントリーのトラックバックURL：
このエントリーへのトラックバック：
ちょっと仕事でクッキーを使うことがあって、いろいろ調べていたら、javascri...
2009年3月 5日 10:02 Blog | sevenstyleweb
Posted by ; uk ： 2009年3月 3日 11:29
>ukさん
コメントありがとうございます！
アドバイスから閃きましたので（教えて頂いたやり方とは違うと思われますが(；´Д｀)）追記しました。
公開してみるものですね。
これからも生暖かくお見守りください。
Posted by ; caraldo_k ： 2009年3月 4日 01:28
ちょうど僕も同じ時期にjquery.cookie.jsについて調べていたので、実に参考になりました。
いや～本当にこれは便利ですね～。
caraldo_kさんみたく、いろいろアイデア出して実験してみようと思います。
Posted by ; seven ： 2009年3月 5日 10:03
>seven様
コメントありがとうございます。
サイトでも紹介して頂けたようで嬉しいです。
私もcookieとかよく分からず手を出したのですが、こうやってコメント頂けるとやって良かったな、と思えます。
実はサンプルで直したいところがあるので、それはまた別の記事にしようと思っています。
そちらもよろしくお願いします。
Posted by ; caraldo_k ： 2009年3月 5日 10:51
caraldo_K
Webディレクター的な事やってます！
iPhone楽しい！マラソン・ロードバイクで肉体改造計画中！でも一番好きなのは漫画です㌰㌰⋋( 'Θ')⋌㌰㌰
poooooon
最近ロードバイクで峠を登りきれず涙をのんだ。トレーニングの為、明日から走る！と毎日誓う。PCとiPhoneとねこがいないと生きていけない社会人。
- JavaScript [20]
- MovableType [22]
- PHP [8]
- Web [38]
- 携帯サイト [2]
- iPhone [8]
- デザインツール [12]
- Fireworks [3]
- Illustrator [1]
- Photoshop [6]
- パソコン [25]
- プロモーション [17]
- 個人的ななにか [39]
>本当はopendd[0]~[n]というcookieが複数セットされるのを避けたかったのですが、うまく記述できませんでした
var nameをクッキー名じゃなくてカンマ区切りか何かで値に突っ込んで、見に行くときはカンマをキーにしてばらしてあげるとか...言ってみるテスト。
ボクもちょうどクッキーと格闘しているところだったのでお邪魔してみました。
ではまた。。。