jQueryではじめるAjax
第5回 jQuery UIによるユーザインターフェースの改良
今回は，jQuery UIを使用してサンプルアプリケーションのユーザインターフェースを改良したいと思います。 jQuery UIが提供する「Dialog」「Draggables」「Droppables」「Sortables」を使用して，ビデオプレーヤーとお気に入り機能を実装します。
jQuery UIってなに？
jQuery UIとは，マウス操作やユーザインターフェースを拡張するjQueryのライブラリです。 現在の最新版jQuery UI 1.5bでは，以下の機能が提供されています。
表1 jQuery UI 1.5bの機能
| ライブラリ | 説明 |
|---|---|
| Draggables | DOM要素をドラッグできるようにする |
| Droppables | DraggableなDOM要素をドロップできるようにする |
| Sortables | マウス操作でDOM要素の順番を入れ替えられるようにする |
| Selectables | DOM要素をマウスで選択できるようにする |
| Resizables | DOM要素の大きさをマウスで変更できるようにする |
| Accordion | 折りたたみ可能な領域をサポートするコンポーネント |
| Datepicker | 日付選択のためのコンポーネント |
| Dialog | 高機能なダイアログコンポーネント |
| Slider | スライダーコンポーネント |
| Tabs | タブ機能を提供するコンポーネント |
詳細な解説とデモは，以下の場所で見ることが出来ます。
- 参考
今回は，「Dialog」「Draggables」「Droppables」「Sortables」を使ってサンプルをより使いやすく拡張したいと思います。
準備
jQuery UI 1.5bは「jQuery UI: Widgets, Components, and Interaction」からダウンロードできます。「jQuery UI 1.5b」のリンクをクリックすると，ダウンロードページが開きます。
図1 jQuery UIダウンロード
アーカイブの内容
アーカイブの内容は以下のようになっています。
表2 jQuery UI 1.5bアーカイブの内容
| ディレクトリ／ファイル | 説明 |
|---|---|
| datepicker/ | 「Datepicker」のライブラリとデモ |
| demos/ | jQuery UI 1.5bのデモ |
| themes/ | 標準で提供されるテーマ「Flora」のスタイルシート及び画像 |
| GPL-LICENSE.txt | GNU General Public License Ver 2のテキスト |
| jquery-1.2.3.min.js | jQuery 1.2.3 |
| jquery.dimensions.js | 座標計算のためのプラグイン |
| MIT-LICENSE.txt | MIT Licenseのテキスト |
| ui.accordion.js | 「Accordion」コンポーネントのファイル |
| ui.dialog.js | 「Dialog」コンポーネントのファイル |
| ui.draggable.ext.js | 「Draggables」機能の拡張オプションのファイル |
| ui.draggable.js | 「Draggables」機能のファイル |
| ui.droppable.ext.js | 「Droppables」機能の拡張オプションのファイル |
| ui.droppable.js | 「Droppables」機能のファイル |
| ui.mouse.js | マウス操作を管理するプラグイン |
| ui.resizable.js | 「Resizables」機能のファイル |
| ui.selectable.js | 「Selectables」機能のファイル |
| ui.slider.js | 「Slider」コンポーネントのファイル |
| ui.sortable.ext.js | 「Sortables」機能の拡張オプションのファイル |
| ui.sortable.js | 「Sortables」機能のファイル |
| ui.tabs.ext.js | 「Tabs」コンポーネントの拡張オプションのファイル |
| ui.tabs.js | 「Tabs」コンポーネントのファイル |
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。
- themes/
- jquery-1.2.3.min.js
- jquery.dimensions.js
- ui.mouse.js
- ui.resizable.js
- ui.dialog.js
- ui.draggable.js
- ui.draggable.ext.js
- ui.droppable.js
- ui.droppable.ext.js
- ui.sortable.ext.js
- ui.sortable.js
jQuery UI 1.5bを使うために，今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが，これまでのサンプルの動作に影響はありません。
ライブラリの設定
ライブラリの各ファイルを，head要素の子要素に以下のように指定します（リスト1）。
リスト1 ライブラリファイルの設定
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.draggable.ext.js"></script>
<script type="text/javascript" src="ui.droppable.js"></script>
<script type="text/javascript" src="ui.droppable.ext.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<script type="text/javascript" src="ui.sortable.ext.js"></script>
テーマの設定
jQuery UIではテーマがサポートされ，コンポーネントの外観をカスタマイズできるようになっています。 標準ではFloraテーマが同梱されていますので，それを使用することにします。
まず，head要素の子要素に以下のように指定してFloraテーマのcssファイルをリンクします（リスト2）。
リスト2 Floraテーマcssファイルのリンク
<link rel="stylesheet" href="themes/flora/flora.all.css" type="text/css" media="screen" title="Flora" />
body要素にfloraクラスを設定します（リスト3）。
リスト3 Floraテーマクラスの設定
<body class="flora">
これで準備は完了です。それでは実装をはじめましょう。
池田正一（いけだまさかず）
仕事ではもっぱらJavaを使い，たまにC/C++を書かされ，WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。
jQueryではじめるAjax
- 第5回 jQuery UIによるユーザインターフェースの改良
- 第4回 検索キーワードを提案するSuggest機能の実装
- 第3回 Youtube APIとjQueryを使いこなす
- 第2回 jQueryによるAjax実装
- 第1回 まずは実装してみよう
