jQuery UI逆引きリファレンス
jQuery UIを利用するには？
jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。
このシリーズでは、何回かにわたって、jQuery UIの基本機能を目的別リファレンスの形式でまとめていきます。
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。プラグインとはいえ、開発チームにはjQuery本家のメンバーも参加しているオフィシャルな存在であり、jQueryベースでリッチなUIを持ったWebアプリを開発するならば、まずjQuery UIの利用を検討することをお勧めします。
jQuery UIのコンポーネントは、大きくInteractions（インタラクション： マウスによる汎用的な対話処理）、Widgets（ウィジェット： 定型的なUI部品）、Effects（エフェクト： jQueryのアニメーション拡張）に分類できます。
jQuery UIで提供されているコンポーネントには、以下のようなものがあります。
| 分類 | コンポーネント名 | 概要 |
|---|---|---|
| Interactions | Draggable | ドラッグ可能な要素を定義 |
| Droppable | ドロップ可能な要素を定義 | |
| Resizable | サイズ変更可能な要素を定義 | |
| Selectable | マウス操作で選択可能な要素を定義 | |
| Sortable | 並べ替え可能な要素を定義 | |
| Widgets | Accordion | アコーディオン・パネル |
| Autocomplete | オート・コンプリート機能付きのテキストボックスを生成 | |
| Button | ボタンやリンク、ラジオボタンなどからボタンを生成 | |
| Datepicker | 日付入力ボックスを生成 | |
| Dialog | 汎用的なダイアログを生成 | |
| Menu | 展開可能なリッチ・メニューを生成 | |
| Progressbar | 進捗（しんちょく）バーを生成 | |
| Slider | スライダーを生成 | |
| Spinner | アップダウン・ボタンを伴う数値入力ボックスを生成 | |
| Tabs | タブ・パネルを生成 | |
| Tooltip | ツールチップを生成 | |
| Effects | Effect | 基本的なエフェクトを提供 |
| Show／Hide／Toggle | 要素の表示／非表示にエフェクトを適用 | |
| Add／Remove／Toggle／Switch Class | スタイル・クラスの適用／解除にエフェクトを適用 | |
| Color Animation | 色を徐々に変化させるエフェクトを提供 |
なお、jQuery本体については、別稿「＠IT Insider.NET： jQuery逆引きリファレンス」でも解説しています。併せてご利用ください。
jQuery UIの導入
jQuery UIでは、動作に必要なライブラリ／スタイルシートをCDN（Content Delivery Network）で提供しています。「事前準備が不要」「（一般的には）パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。
CDNを利用するには、ページに以下のようなコードを含めるだけです。
|
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js"></script>*1
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
|
※太字の部分は後述。
- *1 執筆時点で、既にjQuery 1.10.2がリリースされていますが、jQuery UIのダウンロード・パッケージに含まれているjQueryが1.9.1であることから、本稿ではそれに合わせています。また、jQuery 2.xはIE 6～8に非対応であることから、本連載では利用しません。
冒頭述べたように、jQuery UIはjQueryのプラグインですので、ライブラリをインポートするに当たっては、jQuery→jQuery UIの順番で記述します。
また、<link>要素の太字部分は、テーマの名前を表しています（ここでは「cupertino」）。テーマとは、ウィジェットのスタイルを決めるためのスタイルシートと関連する画像リソースの集合のことです。jQuery UIでは標準で24のテーマを用意しており、これらを差し替えることで自在にウィジェットのデザインを変更できます。利用するテーマは、以下の表の中から選択できます。
| black-tie | blitzer | cupertino | dark-hive | dot-luv | eggplan |
| texcite-bike | flick | hot-sneaks | humanity | le-frog | mint-choc |
| overcast | pepper-grinder | redmond | smoothness | south-street | start |
| sunny | swanky-purse | trontastic | ui-darkness | ui-lightness | vader |
オフラインでの利用
もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でjQuery UIを利用することもできます。ダウンロード・ページは、以下です。
利用する機能があらかじめ特定できる場合には、不要な機能のチェックを外すことで、ライブラリのサイズを抑えることも可能です。特定の機能をチェックすると、関連する機能には強制的にチェックが入りますので、コンポーネント同士の依存関係を気にする必要はありません。もちろん、慣れないうちは無条件に全てのコンポーネントをダウンロードしても構いません。
ダウンロードしたパッケージには、ドキュメントやデモなどが含まれていますが*2、動作に最低限必要となるのは、以下のファイルです。
- /js/jquery-1.9.1.js（jQuery本体）
- /js/jquery-ui-1.10.3.custom.min.js（jQuery UI本体）
- /css/smoothness/jquery-ui-1.10.3.custom.min.css（スタイルシート）
- /css/smoothness/imagesフォルダー（画像ファイル一式）
- *2 /development-bundleフォルダーに収められています。
これらのファイルを任意のフォルダーに配置したうえで、以下のようにライブラリ／スタイルシートをインポートします（パスは配置先に応じて読み替えてください）。
|
<link type="text/css" rel="stylesheet"
href="css/smoothness/jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>*3
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
|
- *3 ダウンロード・パッケージに含まれているjQueryが未圧縮版のjquery-1.9.1.jsなので、本稿ではそれに合わせています。ただし、本番環境では圧縮版のjquery-1.9.1.min.jsを利用するのが望ましいでしょう。圧縮版は、jQueryの本家サイトからダウンロードできます。
なお、ダウンロード・パッケージを利用するのは、オフライン環境の場合だけではありません。CDNに障害があってファイルを取得できなかった場合に備えて（フォールバック）、以下のようなコードを記述すると、より安全です。
|
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="jquery-1.9.1.min.js"><¥/script>');
</script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
window.jQuery.ui || document.write('<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"><¥/script>');
</script>
|
これによって、window.jQuery／window.jQuery.uiが存在しない場合（＝CDNからのデータ取得に失敗して、jQuery／jQuery UIを利用できない場合）に、ローカルからライブラリをインポートできます。
テーマのカスタマイズ
前述したようにテーマは標準で24種類が用意されており、CDNを利用するならばURLを変更することで、パッケージをダウンロードするならばダウンロード・ページ下の［Theme］欄から（次の画面を参照）、それぞれ選択できます。
もっとも、状況によっては「標準以外のデザインを用意したい」というケースもあるはずです。そのような場合のために、jQuery UIでは「Theme Roller」というブラウザ上で動作するアプリを用意しています（次の画面を参照）。ダウンロード・ページ下部の［design a custom theme］リンクから起動することもできます。
Theme Rollerでは、ページの左側のタブ・パネル（＝上の画面では黒い領域）から［Gallery］タブを選択することで、まず標準のテーマを選択し、カスタマイズしていくのが一般的です（一からデザインしても構いませんが、イメージに近いものをカスタマイズした方が作業は容易です）。
細かなデザイン（部位ごとのフォントやカラーリング、角丸など）は、［Roll Your Own］タブから指定できます。ここで指定した内容は、ページの中央～右側に配置されたサンプル・ウィジェットにリアルタイムで反映されますので、見栄えを確認しながら作業を進められます。
デザインが完了したら、［Download theme］ボタンをクリックすることで、元のダウンロード・ページに戻りますので、ファイル一式をダウンロードしてください。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. 【現在、表示中】≫ jQuery UIを利用するには？
jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。
2. DatePickerウィジェットで日付選択ボックスを作成するには？
日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。
3. Tabsウィジェットでタブ・パネルを作成するには？
パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。
