JQuery UI

jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。マウスベースのインタラクションやアニメーション、テーマを適用可能なDialogやDatepickerといったウィジェットが提供される。2007年9月に jquery.com 上にあるJohn Resigのブログにてリリースが発表された。2021年10月、メンテナンスモードへ移行が発表された。

なお、jQuery UIは MIT Licenseであり、フリーかつオープンソースである。

概要
jQuery UI は以下に示す機能が提供されており、これらは機能ごとに分割してダウンロードする事ができる。これによりファイル サイズの削減が行うことができ、サードパーティがテーマを提供することも可能にする。例えば jQUIT Builder では Windows 8 Style UIを模したテーマを提供している。

インタラクション
マウスベースの対話性を実現するために使用される。
 Draggable - 各要素に対するドラッグ機能を実現する。
 Droppable - ドラッグと共に使用され要素のドロップをできるようにする。
 Resizable - 要素のリサイズを実現する。
 Selectable - 複数要素を選択できるようにする。
 Sortable - 要素のソートを行えるようにする。

ウィジェット
ウィジェットはWebサイト利用者が目に触れるコントロールである。全てのウィジェットはテーマを提供することができる。
 Accordion - アコーディオン コンテナである。
 Autocomplete - ユーザの入力に応じ候補を表示する。Menuウィジェットと共に使用する。
 Button - チェック ボックスやラジオ ボタンを含めたボタンを提供する。
 Datepicker - 日付を選択する事ができるカレンダーであり テキストボックス等に値を戻すことができる。
 Dialog - タイトルバーとコンテンツエリア、ボタンから構成されるダイアログボックスを提供する。Buttonウィジェットと共に使用する。
 Menu - ネストされたメニューを提供する。
 Progressbar - 処理の進捗状態を表示するために使用する。
 Slider - 指定した範囲の値を取得できる。
 Spinner - 数値の上下を入力するために使用する。Buttonウィジェットと共に使用する。
 Tabs - ブラウザのタブなどにみられるようなタブを要素に追加する。Buttonウィジェットと共に使用する。
 Tooltip - ツールチップを表示する。

エフェクト
jQueryで提供されるEffectsの上位機能である。要素が表示される際にアニメーション効果が定義されている。
 Color Animation - ある色から別の色に変化させる。
 Toggle Class, Add Class, Remove Class, Switch Class - スタイルを別のスタイルに変化させる。
 Effect - さまざまなエフェクトを定義する(Blind, Fade, Slide等)。
 Toggle - エフェクトの実行を切り替える。
 Hide, Show - 以上のエフェクト使用する。

ユーティリティ
 Position - ある要素の位置に対し相対的な位置を決定する。

サンプル
<script type="text/javascript">
	// #draggableをドラッグできるようにする。
	$(function () {
		$("#draggable").draggable();
	});
</script>
<div id="draggable" style = "width: 150px; height: 150px; padding: 0.5em;" class="ui-widget-content">
 <p>ドラッグしてください</p>
</div>
"draggable"をIDに持つ、divのドラッグ操作をできるようにする。

リリース履歴
jQuery UI は2007年9月17日にリリースされた。

関連項目
jQuery
jQuery mobile - モバイル端末向けに提供されている。
QUnit - The jQuery Projectが提供している、JavaScript向けの単体テストツールである。

脚注・出典

参考文献

外部リンク
 

JavaScript開発ツール
JavaScriptライブラリ