JQuery UI

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

jQuery UI

開発元	The jQuery Project
最新版	1.13.0 / 2021年10月7日 (3年前) (2021-10-07)[1]
最新評価版	1.13.0-rc.3 / 2021年9月25日 (3年前) (2021-09-25)[2]
リポジトリ	github.com/jquery/jquery-ui
プログラミング 言語	JavaScript
サポート状況	Active
種別	Webアプリケーションフレームワーク プラグイン
ライセンス	MIT
公式サイト	jqueryui.com

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

概要

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

インタラクション

マウスベースの対話性を実現するために使用される。

• 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日にリリースされた。^[3]

リリース日[7]	バージョン番号	jQuery バージョン番号	備考
			初回リリース[3]
2008年6月8日	1.5
2009年4月16日	1.6	1.2.6
2009年3月3日	1.7	1.3.2+
2010年3月18日	1.8	1.3.2+
2011年1月19日	1.8.9	1.3.2+
2011年2月22日	1.8.10	1.3.2+
2011年3月15日	1.8.11	1.3.2+
2011年4月13日	1.8.12	1.3.2+
2011年5月12日	1.8.13	1.3.2+
2011年6月17日	1.8.14	1.3.2+
2011年8月1日	1.8.15	1.3.2+
2011年8月15日	1.8.16	1.3.2+
2012年1月10日	1.8.17	1.3.2+
2012年2月20日	1.8.18	1.3.2+
2012年4月16日	1.8.19	1.3.2+
2012年4月30日	1.8.20	1.3.2+
2012年6月5日	1.8.21	1.3.2+
2012年7月24日	1.8.22	1.3.2+
2012年8月15日	1.8.23	1.3.2+
2012年9月28日	1.8.24	1.3.2+
2012年10月08日	1.9.0	1.6+
2012年10月25日	1.9.1	1.6+
2012年11月23日	1.9.2	1.6+
2014年1月17日	1.10.4	1.6+
2021年10月7日	1.13.0	1.8+
2022年7月14日	1.13.2	1.8+

関連項目

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