- ベストアンサー
jquery.cookie.jsを使って、縦に複数並んでいるボックス要素の位置をcookieで保存する方法
- 縦に複数並んでいるボックス要素を矢印ボタンをクリックして、上下に順番を入れ替えるスクリプトがあります。このボックス要素を矢印で動かした際に各ボックスの位置をcookieに保存して、再訪した際にcookieから前回の並び順を読み込みたいです。クリックされたボックス要素の位置をcookieに保存するためには、jquery.cookie.jsを使用することができます。
- まず、ボックス要素の位置を保存するためには、矢印ボタンのクリックイベントに応じて、対応するボックス要素の位置情報をcookieに保存する処理を追加する必要があります。具体的には、blkUp関数とblkDown関数に保存処理を追加します。
- 保存された位置情報を読み込むためには、再訪した際にcookieから値を取得し、ボックス要素の位置を復元する必要があります。具体的には、ページの読み込み時にcookieから値を取得し、ボックス要素の順番を復元する処理を追加します。jquery.cookie.jsを使用すると、簡単にcookieから値を取得することができます。
- tilde0412
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 途中デバッグ用のalertをはずし忘れてました。 あらためて。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#wrapper span.upMark, div#wrapper span.downMark { color:red; cursor:pointer; } </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery_cookie.js"></script> <script type="text/javascript"> <!-- $(function() { //マーカーを挿入 var marker = "<span class='upMark'>△</span><span class='downMark'>▽</span>"; $("#wrapper > div[id^='category']").prepend(marker); //cookie読込 & 並替え処理 var i, c, order, wrap = $("#wrapper").get(0); if (order = $.cookie("categoryOrder")) { order = order.split(","); for (i=order.length; i>0;) { if (c = $("#wrapper > div#" + order[--i])) wrap.insertBefore(c.get(0), wrap.firstChild); } } //cookie記録処理 var setCookie = function() { var i=0, order = []; $("#wrapper > div:[id^='category']").each(function() { order[i++] = $(this).attr("id"); }); $.cookie("categoryOrder", order.join(","), { path:"/", expires:7 }); }; //upの処理を定義 $("#wrapper span.upMark").click(function() { var elm = $(this).parent(); elm.prevAll("div:[id^='category']:first").before(elm); setCookie(); }); //downの処理を定義 $("#wrapper span.downMark").click(function() { var elm = $(this).parent(); elm.nextAll("div:[id^='category']:first").after(elm); setCookie(); }); }); //--> </script> </head> <body> <div id="wrapper"> <div id="category1"> ああああああああああ </div> <div id="category2"> いいいいいいいいいい </div> <div id="category3"> うううううううううう </div> </div> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
なんか、そうとうややこしくて、面倒な事してるみたいですが、 （どうせｊQuery使うならもっと簡単にスムーズにできるはず。） せっかくおつくりになった、コードを使う前提で、 Cookieにしまっておきたいだけなら、「jquery.cookie.js」じゃなく Ojbect Oriented Javascript Cookies 「jquery.ooCookie.js」の方使えば、 http://www.bsped.com/jquery.ooCookie.js ↓を追加すれば、とりあえず状態の保存・復元は出来る。 $(function(){ var c = new Array(); for(var i=1;i<list.length;i++){ c[i] = new $.cookie(); c[i].get(); if(c[i].cookieID=="mycookie"+i){ list[i].before=c[i].before; list[i].after=c[i].after; } } for(var i=1;i<list.length;i++){ var tugi = list[i].after; $("#category"+tugi).after($("#category"+i)); } $(window).unload(function(){ for(var i=1;i<list.length;i++){ c[i].cookieID=="mycookie"+i; c[i].before=list[i].before; c[i].after=list[i].after; c[i].set(); } }); }); きれいに復元できないのは、もとのロジックがちょっと変だから。 修正するぐらいなら、抜本的に作り変えたい...
お礼
ご回答いただきありがとうございました。 他の回答者さんの内容で無事解決できましたので、 そちらをベストアンサーとさせていただきました。 また何かありましたらよろしくお願いいたします。
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryはよく知らないのですが… こんな感じ？ ◇せっかくjqueryを使っているので、全体的にそれっぽくしてみました。 ・範囲を限定するために、全体をwrapperで括っています ・idがcategoryで始まるdiv要素を対象とするものと仮定 ・入替用の△▽は対象divに自動で挿入する （挿入されるマーカーはmarkerで定義しているので、内容を変える時は入替えればOK） ・要素の順番は都度DOMを参照するものとして、listには記録しない ・クッキーはとりあえず7日設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#wrapper span.upMark, div#wrapper span.downMark { color:red; cursor:pointer; } </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery_cookie.js"></script> <script type="text/javascript"> <!-- $(function() { //マーカーを挿入 var marker = "<span class='upMark'>△</span><span class='downMark'>▽</span>"; $("#wrapper > div[id^='category']").prepend(marker); //cookie読込 & 並替え処理 var i, c, order, wrap = $("#wrapper").get(0); if (order = $.cookie("categoryOrder")) { order = order.split(","); for (i=order.length; i>0;) { if (c = $("#wrapper > div#" + order[--i])) wrap.insertBefore(c.get(0), wrap.firstChild); } } //cookie記録処理 var setCookie = function() { var i=0, order = []; $("#wrapper > div:[id^='category']").each(function() { order[i++] = $(this).attr("id"); }); $.cookie("categoryOrder", order.join(","), { path:"/", expires:7 }); alert("out\n" + order); }; //upの処理を定義 $("#wrapper span.upMark").click(function() { var elm = $(this).parent(); elm.prevAll("div:[id^='category']:first").before(elm); setCookie(); }); //downの処理を定義 $("#wrapper span.downMark").click(function() { var elm = $(this).parent(); elm.nextAll("div:[id^='category']:first").after(elm); setCookie(); }); }); //--> </script> </head> <body> <div id="wrapper"> <div id="category1"> ああああああああああ </div> <div id="category2"> いいいいいいいいいい </div> <div id="category3"> うううううううううう </div> </div> </body> </html>
お礼
ご回答いただきありがとうございました。 教えていただいた方法で無事、動作確認ができました。 また、animate についてはなんとか独学でつけてみましたが、 もう少し勉強して、まだ磨きをかけたいと思います。