hampom TODAY

データを登録するシステムを作ると、必ずといって良いほど出てくる要望の一つが「編集」と「並び替え」。

この2番目のデータを1番に持って行きたいんだけれど…。

なんて事をよく言われますが、マウスでヒュンヒュンと入れ替えする為には便利な jQuery の ユーザーインターフェースライブラリを使うと簡単にできちゃいます！

サンプルを設置しました！ → SAMPLE

1. jQuery UI のサイトから、ライブラリをダウンロードします！(→ 公式)

2. ダウンロードして展開したら「css」フォルダをまるごと使いますので組み込むシステムにコピーします。

画像では「ui-lightness」というフォルダ名になっていますが、jQuery UI よりダウンロードする際にテーマを選択する事によってフォルダの名称が異なりますのでご注意ください。

3. システムに読み込む

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

4. ヒュンヒュンする為の javascript もあわせて読み込みましょう！

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

これで準備は整いました。
次にヒュンヒュンターゲットをプログラムで出力します。 jQuery UI の sortable は例えば table の中の tr 単位でも並び替えができますし、さらには tr の中の td単位でも並び替えをする事ができます。

ここでは、ulにて整形されたリストの並び替えを行います。

<ul id="hyunhyun">
<li id="tobi">とびだせヒュン</li>
<li id="sore">それゆけヒュン</li>
<li id="ikko">どんだけヒュン</li>
</ul>

それでは、このリストを並び替えますので HTML のヘッダー部に sortable を追加します。

 $("#hyunhyun").sortable({
        update: function(event, ui) {
          $("#hyun_sort").val($('#hyunhyun').sortable('toArray').toString());
        }
      })
    .disableSelection();

1行目は、id が hyunhyun と指定された ul に sortable を設定しています。そして、2行目より sortable のプロパティを設定し、update はドラッグ＆ドロップが終わった際に実行されるイベントです。

この例では、id を hyun_sort と指定した hiddn のタイプを指定した inputタグの value値に並び順をセットしています。実際にセットされる値は、並び順により liタグの id値がカンマ区切りになります。例のリストの場合には、

tobi,sore,ikko

という情報が入りますので、submit 後は php プログラムにて カンマ(,)で explode すれば、順番通りに id が取得できます。 データの並び順を記録するフィールドなどをアップデートすれば、ヒュンヒュンと並び替えが行えます！

やったね！

おまけ。

sortable には色々なプロパティが用意されており、それを設定すると見栄えがよくなったり、操作性が向上するよ！例えば、
placeholder … css のクラス名を指定します。例えば、 background を指定すると並び替え時に、並び替え先となる場所が予め色が変わるので、どこにリストが移るのかが判りやすくなります！

handle … 例では li 要素の全体がドラッグ＆ドロップ対象になってしまいますが、li要素上の一部分だけをドラッグ＆ドロップ対象にする事ができます。ドラッグ＆ドロップ時の「持ち手(取っ手)」というイメージでしょうか。

axis … ドラッグ＆ドロップ時に、自由自在に要素を動かすことができますが X軸またはY軸の方法にのみに限定したい場合は、 x または y を指定しましょう。

cursor … ドラッグ＆ドロップ時のマウスカーソルの形状を css の cursor と同等に設定することができます。やっぱり move (十字の矢印)にしたいですよね！

他にも色々あるので、詳細は公式ドキュメントを是非！

顔の黄色い人(@yashio)がなんか困っているようなので。

すごく解りづらいタイトルですが、 web app theme を使っていると ページヘッダー部の main-navigation 内の li 要素に対して active という class を指定すると、スタイルが変更される、という仕組みになっています。

上図「Active」という部分が該当します。

1ページずつ編集する事を考えると、ヘッダーやフッターをテンプレート化した際にとても面倒なので、私は以下のような javascript を使って対応しています。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<script type="text/javascript">
$(document).ready(function() {
  var uri = location.href;
  if (uri.match(/(https?[^?]+)(#.*)/)) {
    uri = RegExp.$1;
  }

  $("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active");
});

仕組みは、現在表示しているURLを取得して、そのURLをリンクしているa要素を探しだして parent() により親要素のclassに active を設定する。
という単純なものです。
このプログラムのままでは、リンクを完全なURL形式で書かないとリンクになりませんので注意が必要です。

2010.03.01 追記!

いまどきは、ページ送りなんかしたりすると URL に何ページなのかを付け加えたりするので、このプログラムだとそれらがうまく動かないよ！と顔が黄色い人(@yashio)にいわれたので、作り変えてみました。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<script type="text/javascript">
$(document).ready(function() {
var uri = location.href;
var path = location.pathname.split('/');

  if($("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active").length == 0) {
    for( numCnt = path.length - 1; numCnt > 0; numCnt-- ) {
      uri = uri.replace("/" + path[numCnt], "");
      if($("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active").length != 0)
        break;
    }
  }
});