はじめに

jQuery UIは、ドラッグアンドドロップ、カレンダー、スライダーなどを始め、さまざまなユーザインターフェースを簡単に実装することができるようになるjQueryのライブラリです。ユーザインターフェースに関係する機能がたくさん含まれたjQueryのプラグインと思ってもらえばわかりやすいかと思います。

jQuery UIはたくさんの機能を提供するので、機能が全部入ったスクリプトのファイルはかなりの容量になります（現時点での最新版である1.8.14の圧縮版で約210KB⁠）⁠。すべての機能を使うということはほとんどないので、jQuery UIは使用する機能だけ選択してダウンロードできるカスタムダウンロードを提供しています。

• http://jqueryui.com/download

今回jsdo.itで使うサンプルのコードは全部入りのjQuery UIを使いますが、実際に使う場合はカスタムダウンロードしたコードを使ったほうがいいでしょう。

また、今回紹介しきれない機能やオプションなどについてはドキュメントやデモのページを参照してみてください。

• http://jqueryui.com/demos/（公式サイト）
• http://stacktrace.jp/jquery/ui/（日本語サイト）

jQuery UIを使う

それでは早速jQuery UIを使ってみましょう。jsdo.itでjQuery UIを使う場合にはあらかじめ用意されている、Major Librariesから読み込むことができるので、簡単に使うことができます。jQuery UIを使うにはjQueryも必要ですので、jQueryとjQuery UIをロードします。

jQueryとjQuery UIの2つのがロードされているのがわかると思います。まずはjQuery UIを使ってドラッグの機能を実装してみましょう。以下のサンプルでは要素がドラッグアンドドロップできるようになっています。

これはjQuery UIのDraggableを使っています。JavaScriptコードを見てもらうとわかりますが、以下のようにたった一行だけしか書いてありません。

$('.box').draggable();

jQuery UIを使うとこれだけで要素をドラッグして動かせるようになります。また簡単さに加えてさまざまな機能をオプションやイベントで設定できるのもjQuery UIの特徴の一つです。たとえば今のコードに、ドラッグ中に要素の色を変えるという機能を追加してみます。

追加したコードは以下のようになります。これもとても短いコードで実現できるというのがわかると思います。

$('.box').draggable({
    // ドラッグ開始時に実行される
    start: function() {
        $(this).css('background', '#C00');
    },

    // ドラッグ終了時に実行される
    stop: function() {
        $(this).css('background', '#CCC');
    }
});

ソートを可能にする

次にリストなどをソートするUIを実装してみます。

リストの順番をドラッグアンドドロップで入れ替えられるのがわかると思います。JavaScript部分は以下のようになっています。

$('.list1').sortable().disableSelection();

sortable()がソート可能にする処理です。後ろのdisableSelection()はテキストを選択できないようにする処理で、ドラッグする要素にはこの処理を実行することで、操作時にテキストが選択されなくなり、使い勝手がよくなります。

※ ただしjQuery UIのバージョン1.8.4以下ではdisableSelectionの機能はWebkitベースのブラウザには効きません

リストを相互に入れ替えられるような機能もsortable()で実装することが可能です。サンプルは以下のようになります。

この機能は、connectWithというオプションで移動できる要素を指定することで実現可能です。コードはこのようになります。

// リスト1の項目はリスト2に移動することができる
$('.list1').sortable({
    connectWith: '.list2'
}).disableSelection();

// リスト2の項目はリスト1に移動することができる
$('.list2').sortable({
    connectWith: '.list1'
}).disableSelection();

移動先の要素の指定はjQueryのセレクタと同じ形式になるので、移動先を複数指定することも可能です。

タブのUIを作る

タブやカレンダーなどの機能は、テーマのCSSファイルを読み込む必要があります。20種類以上のテーマが公式サイトで配布されていますので、好きなテーマを選んで使うとよいでしょう。今回はGoogle CDNから読み込むことにします。CDNから読み込むには以下の様なlink要素を追加します。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">

これを使ってタブのUIを作るとこのようになります。

ここではテーマを読み込むために$.uiThemeLoaderというテーマローダーを作成しました。これを使ってテーマをセレクトボックスで切り替えられるサンプルを作ったのでこちらで色々切り替えてみて好きなテーマを探してみて下さい。

タブの機能にもさまざまなオプションが用意されているのでいくつか機能を付け加えてみます。以下は初期表示の時に選択されているタブの指定と、タブ変更時のアニメーションをつけ加えたサンプルです。

コードは上記の例に加えて以下のようなオプションを設定しただけです。

$('#tabs').tabs({
    // 初期表示のタブを指定する
    selected: 2,

    // アニメーション
    fx: { height: 'toggle', opacity: 'toggle' }
});

フォームのUI

カレンダー

jQuery UIにはフォームの入力のUIをサポートする機能もあります。まずは日付入力の機能です。

テキストボックスにフォーカスした時にカレンダーが表示され、カレンダーで選択した日付がフォームに入力されます。サンプルコードではオプションを設定することで日付のフォーマットを変更しています。

スライダー

以下のようなスライダーのUIもうまく使うとユーザーが直感的に操作することができるケースがあるでしょう。

また、以下の様な範囲を指定したり、値を取得することも可能です。

ダイアログ

jQuery UIではさまざまな機能のダイアログを実装できます。

標準のalert()やconfirm()だと、表示できるメッセージがテキストだけだったりと機能が乏しいので、こういったリッチなダイアログを使うことでユーザーの操作を助けることができるケースもあると思います。

自動補完

自動補完の機能は、あらかじめ候補のリストを設定しておくことで入力を補助することができます。

このサンプルでは、送信を押す度に名前を保存しておいて、次回入力時にその入力を自動補完の候補とします。何回も使うようなフォームであればこういう機能もユーザーの助けとなる可能性があります。

今回のお題

以下のようなフォームをjQuery UIの機能を使って、使いやすいUIにするというのが今回のお題です。

チェックボックスがないとフォームで送信できないなどの事情は今回は考える必要はないので、UIのみを考えて実装してみてください。

たとえば、項目をドラッグアンドドロップで好きと嫌いに分類できるようなUIを想定したサンプルが以下になります。

ここではまだJavaScriptを実装していないので、これをforkして続きを作るのでも構いませんし、独自のUIを実装してももちろん大丈夫です。

単にドラッグアンドドロップで移動できるようにするだけでもいいですが、操作中に要素の色を変えて操作をわかりやすくするような仕組みを入れてみるのもいいかもしれません。