JQuery UI

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

なお、jQuery UIはMIT License と GNU General Public 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 - 以上のエフェクト使用する。