jQuery UIのインタラクションを使ってみよう

jQuery UI／プラグインの活用（1）

並べ替え

　最後に並べ替えの使用例を見てみましょう（リスト5）。並べ替えは、ToDoリストなどのアイテムの優先順位づけを変更したい場合に利用できます。

［リスト5］並べ替えの使用例（jQueryUI_sort.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ソートサンプル</title>
<style type="text/css">
.square {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
<!--
  // 1. ソートメソッドの利用例
    $(function () {
        $("#sortlist").sortable();
    });

    function doAction() {
        var msg = "";
  // 2. 並べ替える対象のリストの<div>タグを呼び出し、forで順次取り出す。
        $("#sortlist").children().each(function (i) {
            msg += $("#sortlist").children()[i].innerHTML + "\n";
        });
        alert(msg);
    }
//-->
</script>

  </head>
  <body>
  <h1 id="title">ソートサンプル</h1>
  // 3. 並べ替える要素を配置する。
    <div id="sortlist">
    <div id="msg0" class="square">1番目のメッセージ</div>
    <div id="msg1" class="square">2番目のメッセージ</div>
    <div id="msg2" class="square">3番目のメッセージ</div>
    </div>
  </body>
</html>

　並べ替えには「sortable」メソッドを使用し（1）、並べ替える要素を配置します（3）。ここでは、$("#sorlist").sortable();で並べ替える対象のリストの<div>タグを呼び出し、childrenで取り出したものをforで順次取り出しています。

図10 実行結果（実行前）

図11 実行結果（実行途中）

図12 実行結果（実行後）

まとめ

　第1回では、jQueryのユーザインタフェースを拡張するjQuery UIのインストールから、要素のドラッグ＆ドロップ、リサイズ、並べ替えについて取り上げました。これらをうまく組み合わせて使うことによって、例えば、YouTubeのお気に入りリストを視覚的にドラッグ＆ドロップして並べ替えたり、ソートさせたりというようなアプリケーションの構築につながります。アイディア次第で、今までよりも使い勝手のよいアプリケーションがどんどん増えていくきっかけになるでしょう。

　次回は、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarを用いた使用例を取り上げる予定です。

参考資料

• jQuery UI
• jQuery Style