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

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

　本記事では、JavaScriptライブラリの中でも人気が高まりつつある「jQuery UI」のインストールから、要素のドラッグ＆ドロップ、リサイズ、並べ替えについて取り上げます。

はじめに

　JavaScriptライブラリの中でも人気が高まっているjQueryは、本体に機能追加できる手段が標準で備わっており、「プラグイン」という拡張スクリプトが提供されています。

　jQuery Plugin公式サイトではアニメーション効果やフォーム操作補助、メディアの操作についてなどの1,000を超えるプラグインが公開されており、自作したプラグインを登録することも可能です。また、jQueryの機能を拡張し、マウス操作やアニメーション機能などユーザインタフェースに特化したライブラリであるjQuery UIがあります。jQuery PluginもjQuery UIも、jQueryに加え、別途ダウンロードおよびインストールする必要があります。

　jQuery UIで提供されている機能を、大きく分類すると表1のようになります。

表1：jQuery UIの分類

分類名	内容
インタラクション	ドラッグ＆ドロップ、リサイズなど
ウィジェット	アコーディオン、ダイアログ、タブなど
ヴィジュアル効果	アニメーション機能、エフェクト機能の強化など

　第1回では、jQuery UIのインストールからインタラクションにあたる要素のドラッグ＆ドロップ、リサイズ、並べ替えについて取り上げます。

対象読者

• jQuery UIに興味があり、使ってみたいと思っている方

必要な環境と準備

jQuery UIのダウンロード

　執筆時点のjQuery UIの最新版は、1.8.2です。jQuery UIのサイトからダウンロードしてください。

　jQuery UI 1.8.2はjQuery 1.4.Xに対応しています。ダウンロードしたファイル（jquery-ui-1.8.2.custom.zip）を展開すると、以下のようなフォルダおよびファイルが作成されます。

表2：jquery-ui-1.8.1.custom.zipの展開後

フォルダ／ファイル名	概要
css	テーマに関連するスタイルシートと画像が含まれている
development-bundle	開発者向けのドキュメントやデモ、非圧縮のライブラリなどが含まれている
js	jQueryとjQuery UIの本体が含まれている
index.html	jQurey UIのサンプル一覧

jQuery UIの使い方

　jQuery UIを利用するには、「js」と「css」のフォルダをドキュメントルート内にコピーし、以下の3種類のファイルをロードします。

1. jQueryライブラリ
2. jQuery UIライブラリ
3. jQuery UIのテーマのスタイルシート（必要時のみ）

　本稿では取り上げませんが、jQuery UIでは標準で提供されているコンポーネントに対して、フォントのスタイルやテーマなどをカスタマイズすることが可能です。詳しくはjqueryui.comを参照してください。

［リスト1］jQuery UIの利用方法

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