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

はじめに

　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）を展開すると、以下のようなフォルダおよびファイルが作成されます。

jQuery UIの使い方

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

1. jQueryライブラリ
2. jQuery UIライブラリ
3. 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" />