JQuery UI

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

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

なお、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 UI 1.13.0 Changelog” (2021年10月7日). 2021年10月14日閲覧。
^ “jQuery UI 1.13.0-rc.3 released” (2021年9月25日). 2021年10月4日閲覧。
^ ^a ^b ^c John Resig (17 September 2007). “jQuery UI: Interractions and plug-ins”. jQuery blog. 2012年11月17日閲覧。
^ “jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発” (2021年10月12日). 2022年2月10日閲覧。
^ Dave Methvin (10 September 2012). “jQuery Licensing Changes”. jQuery blog. 2016年8月18日閲覧。
^ “jQUIT(jQuery UI Themes)”. Thomas Ingwersen. 2012年11月17日閲覧。
^ “jQuery UI - Documentation: UIChangelog”. 2012年11月17日閲覧。

参考文献

外部リンク

公式ウェブサイト

[1] “jQuery UI 1.13.0 Changelog” (2021年10月7日). 2021年10月14日閲覧。

[2] “jQuery UI 1.13.0-rc.3 released” (2021年9月25日). 2021年10月4日閲覧。

[release-3] John Resig (17 September 2007). “jQuery UI: Interractions and plug-ins”. jQuery blog. 2012年11月17日閲覧。

[4] “jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発” (2021年10月12日). 2022年2月10日閲覧。

[LicenseChange-5] Dave Methvin (10 September 2012). “jQuery Licensing Changes”. jQuery blog. 2016年8月18日閲覧。

[6] “jQUIT(jQuery UI Themes)”. Thomas Ingwersen. 2012年11月17日閲覧。

[Changelog-7] “jQuery UI - Documentation: UIChangelog”. 2012年11月17日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]