JQuery UI

jQuery UIは、jQueryを基盤としたJavaScriptライブラリで、インタラクティブなWebサイト開発を支援します。マウス操作によるインタラクション、アニメーション、テーマ適用可能なウィジェットなど、豊富な機能を提供しています。2007年9月にJohn Resig氏のブログで発表され、長らくWeb開発者にとって重要なツールでしたが、2021年10月にメンテナンスモードへ移行しました。

機能概要

jQuery UIは、以下の主要な機能を提供しています。これらの機能はモジュール化されており、必要なものだけをダウンロードすることでファイルサイズを削減できます。また、サードパーティによるテーマ提供も可能で、例えばjQUIT BuilderではWindows 8スタイルの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: ある要素に対して相対的な位置を決定します。

サンプル

以下は、IDが"draggable"のdiv要素をドラッグ可能にする例です。

javascript
$(function() {
$("#draggable").draggable();
});

リリース履歴

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

関連項目

jQuery: jQuery UIの基盤となるJavaScriptライブラリです。
jQuery mobile: モバイル端末向けに提供されているjQueryのライブラリです。
QUnit: The jQuery Projectが提供するJavaScript向けの単体テストツールです。

外部リンク

jQuery UI 公式ウェブサイト

jQuery UIは、Webサイトに高度なインタラクティブ性をもたらす強力なライブラリです。豊富な機能と柔軟なカスタマイズ性により、開発者は魅力的なWebアプリケーションを効率的に構築できます。

もう一度検索