Cookieで開閉の保存
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を使って開閉を保持するメニューを作ってみる
サンプル
サンプルがありますので、ここで動きを確かめて下さい。
サンプル
- Web-Parkのホーム >
- Javascript >
- Cookieで開閉の保存
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「Cookieで開閉の保存」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
https://web-park.org/javascript/cookie090906.html/trackback