jQueryではじめるAjax

第5回　jQuery UIによるユーザインターフェースの改良

JavaScript, jQuery, Ajax

この記事を読むのに必要な時間：およそ 15 分

今回は，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ダウンロード

図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">

これで準備は完了です。それでは実装をはじめましょう。

JavaScript, jQuery, Ajax

著者プロフィール

池田正一（いけだまさかず）

仕事ではもっぱらJavaを使い，たまにC/C++を書かされ，WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。