jQuery UI とは、jQuery公式のユーザインターフェース（UI）用ライブラリのこと。カレンダー、タブ、アコーディオン、ダイアログ、エフェクト、並べ替え、表示切替、ドラッグ移動、ドロップ、サイズ変更、スライダーなど、多様な UI を簡単に導入できる。
- jQuery UI 導入方法
- Accordion / アコーディオン
- AddClass / クラス追加
- Autocomplete / オートコンプリート
- Button / ボタン
- Datepicker / カレンダー
- Dialog / ダイアログ
- Draggable / ドラッグ移動
- Droppable / ドロップ
- Effects / エフェクト
- Hide / 非表示
- Menu / メニュー
- Position / 位置指定
- Progressbar / プログレス・バー
- RemoveClass / クラス削除
- Resizable / サイズ変更
- Selectable / 項目選択GUI
- Show / 表示
- Slider / スライダー
- Sortable / 並べ替え
- Spinner / スピナー
- SwitchClass / クラス切替
- Tabs / タブ
- Toggle / 表示切替
- ToggleClass / クラス切替
- Tooltip / ツールチップ
- jQuery UI 逆引きリファレンス
基本
Draggable
- jQuery UI の Draggable プラグインによるドラッグ移動可能ボックス
- 水平方向（左右）だけ、ドラッグで移動できるボックス
- 垂直方向（上下）だけ、ドラッグで移動できるボックス
- グリッド（格子）に沿って、ドラッグで移動できるボックス
- 特定要素内だけ、ドラッグで移動できるボックス
- ドラッグ移動できるボックスを、特定要素にスナップさせる
- ドラッグ移動できるボックスの特定要素へのスナップの内外指定
- ドラッグ移動できるボックスの特定要素へのスナップ距離を指定
- ドラッグ移動できるボックスにおいて、ドラッグできる要素を指定
- ドラッグを放すと元の位置に戻るドラッグ移動ボックス
- ドラッグ移動ボックスにおいて、移動用クローンを出現させる
- ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする
- ドラッグ移動ボックスにおける、移動中のスクロール可否設定
- ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加
Droppable
- jQuery UI の Droppable プラグインによるドロップできるボックス
- jQuery UI の Droppable プラグインの addClass オプション
- jQuery UIのDroppableのactiveClass、hoverClass、addClass
- jQuery UI の Droppable プラグインの accept オプション
Resizable
- jQuery UI の Resizable プラグインによるサイズ変更可能ボックス
- サイズ変更可能ボックスの最小サイズと最大サイズを指定
- サイズ変更可能ボックスの幅と高さの比率を指定
- グリッドに沿って大きさを変更できるボックス
- 半透明のボックスで大きさを変更してから実際のボックスを変更
- アニメーション動作をしながらサイズ変化するボックス
- テキスト入力欄のサイズを、ドラッグ＆ドロップで変更
- jQuery UI と jqPlot で作るサイズを変更できる折れ線グラフ
- jQuery UI と jqPlot で作るサイズを変更できる縦棒グラフ
- jQuery UI と jqPlot で作るサイズを変更できる円グラフ
- jQuery UI と jqPlot で作るサイズを変更できるブロックチャート
- jQuery UI と jqPlot で作るサイズを変更できるバブルチャート
- jQuery UI と jqPlot で作るサイズを変更できるピラミッドグラフ
Selectable
Sortable
- 順番を入れ替えられるアコーディオンメニュー
- jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
- jQuery UI の Sortable による並べ替えを楽にするオプション
- ドラッグ＆ドロップで並べ替えた順番を保存・再現
- ドラッグ＆ドロップで並べ替えた順番を送信
- 複数のリストの境界を越え、ドラッグ＆ドロップで並べ替え
- ドラッグ＆ドロップで並べ替えるときのドラッグできる部分を指定
- 格子状に並べたリストをドラッグ＆ドロップで並べ替え
- ドラッグ＆ドロップで並べ替える対象となる要素を指定
- ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加
- ドラッグ＆ドロップによりタブの順番を並べ替えられるタブメニュー
Accordion
- jQuery UI の Accordion プラグインによるアコーディオンメニュー
- jQuery UI の Accordion プラグインによるアコーディオンメニュー [2]
- jQuery UI の Accordion プラグインによるアコーディオンメニュー [3]
- jQuery UI の Accordion プラグインによるアコーディオンメニュー [4]
- jQuery UI の Accordion プラグインによるアコーディオンメニュー [5]
- jQuery UI の Accordion プラグインによるアコーディオンメニュー [6]
- 順番を入れ替えられるアコーディオンメニュー
Autocomplete
Button
- jQuery UI の Button プラグインによるスタイリッシュなボタン
- jQuery UI の Button プラグインで、ボタン要素にアイコンを付加
- jQuery UI の Button プラグインで、ボタン要素のラベルを変更
- jQuery UI の Button プラグインを使ったボタン式メニュー
- jQuery UI の Button プラグインによるスタイリッシュなラジオボタン
- jQuery UI の Button プラグインで、チェックボックスをボタン化
- jQuery UI の Slider、Dialog、Button による複数評価項目フォーム
- jQuery UI の Button と Menu によるボタンクリックで現れるメニュー
- jQuery UI の Button プラグインで作るアイコンボタン一覧
Datepicker
- jQuery UI の Datepicker プラグイン
- カレンダーから入力した日付のフォーマットを変更
- Datepicker のカレンダーで選択できる日付の範囲を設定
- jQuery UI の Datepicker プラグインのカレンダーを日本語化
- jQuery UI の Datepicker のカレンダーを選択言語にローカライズ
- カレンダーから２つの入力欄に別々の書式の日付を入力
- Datepicker のカレンダーに「今日」と「閉じる」のボタンを出現
- Datepicker のカレンダーに月と年のドロップダウンリスト移動
- カレンダーに余剰部分があれば前月次月の日を表示
- Datepicker のカレンダーの左列に、その年の何週目かを表示
- jQuery UI の Datepicker のカレンダーの週の最初の曜日を設定
- jQuery UI の Datepicker のカレンダーを複数月分表示
- カレンダーアイコンをクリックすることで、カレンダーを表示
- jQuery UI の Datepicker のカレンダーをアニメーション動作で開閉
- 日付のフォーマットに応じて入力欄の大きさを自動変更
- jQuery UI の Datepicker のカレンダーによる日付範囲指定フォーム
Dialog
- jQuery UI の Dialog プラグインで、ダイアログを表示させる
- jQuery UI の Dialog のダイアログをボタンクリックで開く
- jQuery UI の Dialog のダイアログをアニメーション動作で開閉
- jQuery UI の Dialog プラグインのダイアログをページより目立たせる
- jQuery UI の Dialog プラグインのダイアログのサイズを指定
- jQuery UI の Dialog プラグインのダイアログの最小サイズを指定
- jQuery UI の Dialog プラグインのダイアログの最大サイズを指定
- jQuery UI の Dialog によるダイアログのサイズ変更（リサイズ）可否
- jQuery UI の Dialog プラグインのダイアログの表示位置を指定
- jQuery UI の Dialog によるダイアログのドラッグ移動可否
- jQuery UI の Dialog プラグインのダイアログにクラスを追加
- jQuery UI の Dialog のダイアログを、ボタンクリックで閉じる
- jQuery UI の Dialog プラグインを使った送信確認ダイアログ
- jQuery UI の Dialog プラグインのダイアログを使ったフォーム
- jQuery UI の Slider、Dialog、Button による複数評価項目フォーム
- jQuery UI の Dialog プラグインのダイアログをページ読み込み時に表示
Progressbar
Slider
- jQuery UI の Slider プラグインによるスライダー
- jQuery UI の Slider によるスライダーの初期値、範囲、移動値を設定
- jQuery UI の Slider による、数値範囲をGUIで設定するスライダー
- スライダーのハンドルの位置の数値より大きい方のトラックを着色
- スライダー上のクリックした場所へハンドルをアニメーション移動
- jQuery UI の Slider プラグインを使った、縦型（垂直型）スライダー
- jQuery UI の Slider による、数値範囲をGUIで設定する縦型スライダー
- jQuery UI の Slider、Dialog、Button による複数評価項目フォーム
- jQuery UI の Slider プラグインによるスライダーを使ったカラーピッカー
- jQuery UIの Tabs と Slider プラグインによるスライダー付タブメニュー
Tabs
- jQuery UIの Tabs プラグインによるタブメニュー
- jQuery UI の Tabs プラグインの cookie オプション
- jQuery UIの Tabs と Slider プラグインによるスライダー付タブメニュー
- 別ファイルをタブの内容に表示させる Ajax 系タブメニュー
- jQuery UI の Tabs プラグインを使ったマウス・オーバー・タブ・メニュー
- jQuery UI の Tabs による、タブ名クリックで開閉するタブメニュー
- ドラッグ＆ドロップによりタブの順番を並べ替えられるタブメニュー
- jQuery UI の Tabs プラグインによる、タブを追加できるタブメニュー
- jQuery UI の Tabs プラグインによるタブを下に表示するタブメニュー
- jQuery UI の Tabs プラグインを使ったタブメニューのサイズを指定
- jQuery UI の Tabs によるタブメニューで、最初に表示するタブを指定
- jQuery UI の Tabs によるアニメーションでタブを切り替えるタブメニュー
- jQuery UI の Tabs で作る縦並びのタブ型メニュー
ToggleClass
AddClass
RemoveClass
SwitchClass
Effects
- jQuery UI の effect プラグインを使ったアニメーション動作
- jQuery UI の effect プラグインを使い点滅させる
- jQuery UI で、ブラインドを開けるアニメーションで要素を非表示に
- jQuery UI で、ボールが弾むようなアニメーション動作
- jQuery UI で、クリップが挟むようなアニメーションで要素を非表示に
- jQuery UI で、左へスライドしながら徐々に透明になるアニメーション
- jQuery UI で、破裂するようなアニメーションで要素を非表示にする
- jQuery UI で、徐々に透明になるアニメーション
- jQuery UI で、下から上へ、次に、右から左へ折りたたむアニメーション
- jQuery UI の effect を使い、クリックで要素をハイライト表示
- jQuery UI で、徐々に膨らみながら透明になるアニメーション
- jQuery UI の effect を使った、徐々に縮小するアニメーション
- jQuery UI の effect を使った、徐々に拡大するアニメーション
- jQuery UI の effect を使い、クリックで要素を横に揺らす
- jQuery UI で、要素のサイズを徐々に変更するアニメーション
- jQuery UI の effect を使いスライドアニメーションで要素を出現させる
- jQuery UI で、クリックした要素を特定の要素へ転送するアニメーション
Toggle
- jQuery UI の toggle を使いアニメーション動作で表示/非表示
- jQuery UI の toggle を使い、色やサイズをアニメーションで切替
- jQuery UI の toggle で、ブラインドを開閉するようなアニメーション
- jQuery UI の toggle を使い、弾むようなアニメーションで表示/非表示
- jQuery UI の toggle で、クリップが挟むようなアニメーションの表示切替
- jQuery UI の toggle で、スライドして透明/不透明になるアニメーション
- jQuery UI の toggle で、破裂するようなアニメーションの表示切替
- jQuery UI の toggle で、折りたたむようなアニメーションの表示切替
- jQuery UI で、ハイライト表示し徐々に透明/不透明になるアニメーション
- jQuery UI で、膨らみながら透明/縮みながら不透明のアニメーション
- jQuery UI の toggle を使い、点滅させながら表示/非表示を切替
- jQuery UI の toggle で、縮小/拡大するアニメーションの表示切替
- jQuery UI の toggle で、横に揺らすアニメーションの表示切替
- jQuery UI の toggle を使い、スライドするアニメーションで表示切替
- jQuery UI の toggle で、透明⇔不透明のアニメーションの表示切替
Hide
- jQuery UI の hide を使い、アニメーション動作で要素を非表示にする
- jQuery UI の hide を使い、ブラインドを開けるアニメーションで非表示に
- jQuery UI の hide を使い、弾むようなアニメーションで非表示にする
- jQuery UI の hide で、クリップが挟むようなアニメーションで非表示に
- jQuery UI の hide で、スライドしながら徐々に透明になるアニメーション
- jQuery UI の hide で、破裂するようなアニメーションで非表示にする
- jQuery UI の hide で、折りたたむようなアニメーションで非表示にする
- jQuery UI の hide で、ハイライト表示し徐々に透明になるアニメーション
- jQuery UI の hide で、膨らみながら徐々に透明になるアニメーション
- jQuery UI の hide を使い、点滅させながら要素を非表示にする
- jQuery UI の hide で、徐々に縮小するアニメーションで非表示にする
- jQuery UI の hide で、要素のサイズを徐々に変更後、非表示にする
- jQuery UI の hide を使い、スライドするアニメーションで要素を非表示に
- jQuery UI の hide を使い、徐々に透明になるアニメーションで非表示に
Show
- jQuery UI の show を使い、アニメーション動作で要素を表示する
- jQuery UI の show を使い、ブラインドを閉じるアニメーションで表示する
- jQuery UI の show を使い、ボールが弾むようなアニメーションで表示
- jQuery UI の show を使い、クリップが開くようなアニメーションで表示
- jQuery UI の show で、スライドしながら徐々に透明から不透明になる
- jQuery UI の show を使い、破裂を逆回転したようなアニメーション
- jQuery UI の show を使い、折り畳んであるものを広げるように表示
- jQuery UI の show を使い、ハイライト表示アニメーション後に表示
- jQuery UI の show を使い、縮みながら徐々に透明から不透明になる
- jQuery UI の show を使い、要素を点滅させながら表示させる
- jQuery UI の show を使い、徐々に拡大するアニメーションで表示する
- jQuery UI の show を使い、要素を表示し横に揺らすアニメーション
- jQuery UI の show を使い、サイズを徐々に変更させながら表示
- jQuery UI の show を使い、左から右へのスライドアニメーションで表示
- jQuery UI の show を使い、徐々に透明から不透明になるアニメーション