はじめに
JavaScriptライブラリの中でも人気が高まっているjQueryは、本体に機能追加できる手段が標準で備わっており、「プラグイン」という拡張スクリプトが提供されています。
jQuery Plugin公式サイトではアニメーション効果やフォーム操作補助、メディアの操作についてなどの1,000を超えるプラグインが公開されており、自作したプラグインを登録することも可能です。また、jQueryの機能を拡張し、マウス操作やアニメーション機能などユーザインタフェースに特化したライブラリであるjQuery UIがあります。jQuery PluginもjQuery UIも、jQueryに加え、別途ダウンロードおよびインストールする必要があります。
jQuery UIで提供されている機能を、大きく分類すると表1のようになります。
| 分類名 | 内容 |
| インタラクション | ドラッグ＆ドロップ、リサイズなど |
| ウィジェット | アコーディオン、ダイアログ、タブなど |
| ヴィジュアル効果 | アニメーション機能、エフェクト機能の強化など |
第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）を展開すると、以下のようなフォルダおよびファイルが作成されます。
| フォルダ／ファイル名 | 概要 |
| css | テーマに関連するスタイルシートと画像が含まれている |
| development-bundle | 開発者向けのドキュメントやデモ、非圧縮のライブラリなどが含まれている |
| js | jQueryとjQuery UIの本体が含まれている |
| index.html | jQurey UIのサンプル一覧 |
jQuery UIの使い方
jQuery UIを利用するには、「js」と「css」のフォルダをドキュメントルート内にコピーし、以下の3種類のファイルをロードします。
- jQueryライブラリ
- jQuery UIライブラリ
- jQuery UIのテーマのスタイルシート（必要時のみ）
本稿では取り上げませんが、jQuery UIでは標準で提供されているコンポーネントに対して、フォントのスタイルやテーマなどをカスタマイズすることが可能です。詳しくはjqueryui.comを参照してください。
<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" />
