Cookieで開閉の保存

Javascript

2009.09.07

jqueryのtoggle開閉をcookieに保存してリロードしても最後の状態を保存します。
今まで特に必要ないと考えていましたが、仕事で制御の要求が出たのと、色んな場面を想像すれば必要だと感じました。

jqueryによるcookieの制御

jqueryのjquery.cookie.jsプラグインを使用すれば簡単にcookieを制御出来ます。

まずはダウンロード

下記URLからjquery.cookie.jsをダウンロードして、読み込みます。
jquery.cookie.jsダウンロード

読み込んだだけでは何のアクションに対しても指定していないので指定をします。

基本的なソース

$.cookie('制御するcookie名', '制御するcookie名の値',{ expires: cookieの保存期限(日数)});

ただ、これだけ見ても何をしていいのかわからないですよね…。

開閉をcookieで制御

jqueryのtoogleによる開閉は一度紹介しましたので省きます。

$(document).ready(function(){

//クリック時のfunction設定
$('.button').click(function(){
$('#textArea').slideToggle('slow');

//クリックした際にcookieのセットの確認
if ($.cookie("openTxt")) {//もしcookie("openTxt")があれば
$.cookie("openTxt", '', { expires: -1 });//cookie("openTxt")を削除
} else {
$.cookie("openTxt", '1', {expires:7});//cookie("openTxt")をセット
}
});

//セットされたcookieの設定
if ($.cookie("openTxt")) {//もしcookie("openTxt")があれば
$("#textArea").show();//要素を表示する
} else {
$("#textArea").hide();//要素を隠す
}

$('.button').css( {
cursor : "pointer" //ポインターを表示
});
});

ややこしい指定ですが、簡単にこの流れを説明しますと、
1.クリックして要素を表示
2.cookieの有無を確認して、なければセット
※この状態でリロードしてもcookieがセットされているので開いたまま
3.クリックして要素を非表示
4.cookieの有無を確認して、cookieはあるので削除
※この状態でリロードするとcookieが削除されているので要素は閉じている

参考サイト

なかなか難しく、自分の頭の中でもまだ整理がついていません。
このソースは「caraldo.net」を参考にさせて頂きました。
また、複数タブの開閉制御もこのサイトでは紹介しています。
jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる

サンプル

サンプルがありますので、ここで動きを確かめて下さい。
サンプル

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. Cookieで開閉の保存
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「Cookieで開閉の保存」のトラックバックURL
http://web-park.org/javascript/cookie090906.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook