jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。マウスベースのインタラクションやアニメーション、テーマを適用可能なDialogやDatepickerといったウィジェットが提供される。2007年9月に jquery.com 上にあるJohn Resigのブログにてリリースが発表された。2021年10月、メンテナンスモードへ移行が発表された。
なお、jQuery UIはMITライセンスであり、フリーかつオープンソースである。
概要 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 バージョン番号 備考 初回リリース 2008年6月8日1.52009年4月16日1.6 1.2.62009年3月3日1.71.3.2+2010年3月18日1.81.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.01.8+2022年7月14日1.13.21.8+
関連項目 jQuery jQuery mobile - モバイル端末向けに提供されている。 QUnit - The jQuery Projectが提供している、JavaScript向けの単体テストツールである。
脚注・出典
参考文献
外部リンク