jQuery UI


jQuery UIの概要

 jQuery UIはjQuery User Interfaceの略で、ブラウザで使用可能な様々なユーザインタフェース部品を提供するライブラリです。

ダウンロードはこちら。jqueryui.com

 使用する場合は、GoogleがホストしているURLをリンクするのが簡単です。"x.xx.x"はバージョン番号で例えば、"1.11.1"などです。もし、サーバにインストールするのならこれらのファイルをダウンロードして、サイトにコピーし、下のURLをそれに合わせて書き換える必要があります。

 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/x.xx.x/themes/smoothness/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/x.xx.x/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/x.xx.x/jquery-ui.min.js"></script>

 次の表はjQuery UIの提供する機能や部品の一覧です。これらの詳しい説明や動作のサンプルは英語ですがjqueryui.comがわかりやすいです。

分類部品説明
InteractionsDraggableドラッグ可能なコンテナ
Droppableドロップ可能なコンテナ
Resizableサイズが変えられるコンテナ
Selectable選択可能なコンテナ
Sortable並べ替え可能なコンテナ
WidgetsAccordionアコーデオンのように移動し内容を隠したり表示できる部品
Autocompleteオートコンプリート。文字を入力すると全体の語の候補が表示される。
Button押しボタン
Datepickerカレンダーから日付を選べる部品
Dialogダイアログボックス
Menuメニュー
Progressbar進捗表示
Selectmenuドロップダウン
Sliderスライダー
Spinnerスピナー(数のアップダウン)
Tabsタブ
Tooltipツールチップ
EffectsAdd ClassCSSのクラスを部品に追加する
Color Animation色のアニメーション
Easing様々な曲線
Effect部品に対する様々な効果
Hide部品を隠すときの効果
Remove Class部品のCSSクラスを削除
Show部品を表示するときの効果
Switch Class部品のCSSクラスのスイッチ
Toggle部品の表示・非表示の効果
Toggle Class部品のCSSクラスのトグル効果
UtilitiesPosition位置の設定
Widget Factoryウィジェットの作成

 

このページの先頭へ戻る