jQuery UI

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
jQuery UI
開発元 The jQuery Project
最新版 1.10.4 / 2014年01月17日(7か月前) (2014-01-17[1]
プログラミング言語 JavaScript
サポート状況 Active
種別 Webアプリケーションフレームワーク プラグイン
ライセンス デュアルライセンス:
GPLMIT
公式サイト jqueryui.com
テンプレートを表示

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

なお、jQuery UIは MIT LicenseGNU General Public Licenseデュアルライセンスであり、フリーかつオープンソースである。

概要[編集]

jQuery UI は以下に示す機能が提供されており、これらは機能ごとに分割してダウンロードする事ができる。これによりファイル サイズの削減が行うことができ、サードパーティがテーマを提供することも可能にする。例えば jQUIT Builder では Windows 8 Style UIを模した[3]テーマを提供している。

インタラクション[編集]

マウスベースの対話性を実現するために使用される。

  • 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日にリリースされた。[2]

リリース日[4] バージョン番号 jQuery バージョン番号 備考
初回リリース[2]
2008年6月8日 1.5
2009年4月16日 1.6 1.2.6
2009年3月3日 1.7 1.3.2+
2010年3月18日 1.8 1.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+

関連項目[編集]

  • jQuery
  • jQuery mobile - モバイル端末向けに提供されている。
  • QUnit - The jQuery Projectが提供している、JavaScript向けの単体テストツールである。

脚注・出典[編集]

  1. ^ jQuery UI 1.10.4 Changelog” (2014年1月17日). 2014年4月21日閲覧。
  2. ^ a b c John Resig (2007年9月17日). “jQuery UI: Interractions and plug-ins”. jQuery blog. 2012年11月17日閲覧。
  3. ^ jQUIT(jQuery UI Themes)”. Thomas Ingwersen. 2012年11月17日閲覧。
  4. ^ jQuery UI - Documentation: UIChangelog”. 2012年11月17日閲覧。

参考文献[編集]

外部リンク[編集]