--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

07/30 2011

Sortable (jQuery UI)の順序をクッキーに記録・再現させる方法

jQuery UIのsortableはリスト等の順序をAjaxに並び替えるために大変便利です。そして、Methodsの中でtoArrayを使えば、すべてリストのIDを順番に配列に吐き出してくれるので、並び替えたリストの順序を記録してCookieやDBにAjaxで保存することができます。しかし、クッキーやデータベースから呼び出したリスト順序の記録をリスト表示に再現するためのMethodsはありません。そこでjavascript関数を作成してみました。


HTML(例)

<ul>
<li id="foo1"></li>
<li id="foo2"></li>
<li id="foo3"></li>
</ul>

Sortable(jQuery UI)のメソッドtoArrayによる、クッキーへのリスト順序記録

$('ul').sortable({
update:function(ev,ui){$.cookie("Lists", $(this).sortable('toArray'), {expires: 7});}
});

解説

  • 順序を入れ替えた時(update)にクッキー(名前はLists)に保存します。
  • jquery.cookie.jsを使ってクッキーに、リストのIDをカンマで区切ったテキストデータを記録します。
  • 例の場合、クッキーの保存期間は7日間です。

Cookieからリスト順序を読んでリスト表示に反映

if($.cookie("Lists")){
var IDs = $.cookie("Lists").split(",").reverse();
var items = new Array();
$.each($('ul').sortable("toArray"),function(idx,obj){items[obj]=obj;});
$.each(IDs,function(idx,obj){if (obj in items) $("#"+obj).prependTo("ul");}});
}

解説

  • 1行目: クッキーがある場合にのみ応答します。ない場合は元々のHTMLが表示されたままです。
  • 2行目: クッキーを読み込み、配列にして順序を入れ替えます。
  • 3、4行目: HTMLのリストのIDを新たに配列にし、IDをキーと値にもつ連想配列(ハッシュ)にします。
  • 5行目: HTMLリストのハッシュとクッキーの配列で合致するリストを順々に前へ移動させます。
  • クッキーから配列にした後に順序を入れ替えないまま(.reverse()せず)、最後を.prependToではなく.appendToにすることも可能です。リストの最後が重要な場合(clear="left"を入れたい場合など)は.revere()して.prependToを、リストの最初が重要な場合(ウェブサイトの更新によって新規リストを加えた時にそれをリストのトップに表示したい場合など)は.reverse()せずに.appendToにするとよいです。


無料聖書検索サイトDTWorksのヘッダー部分のボタン群に、この機能を入れていますので具体例としてイジッてみてください。



blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。