jQuery UIとは、jQuery公式のUI用ライブラリです。これを使うことで、ダイアログ、カレンダーやドラッグ移動などの複雑な処理を簡単に実装することができます。
jQuery UIの導入
jQuery UIを使うには、jQuery本体の読み込みに加えて、jQuery UIの読み込みとテーマCSSが必要になります。
jQuery UIを読み込み
jQuery UIの公式ページにあるダウンロードページから、必要となるものだけを選択しダウンロードすることができます。 jQuery UI全体を読み込む場合は、以下のようにjQueryがホスティングしているjQuery UIのファイルを読み込むこともできます。
|
1 |
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> |
テーマを選択
次に、jQuery UIの公式サイトのテーマページから好きなデザインを選びます。もちろん、テーマを使わずに自分でCSSを作成することもできます。 今回は、Google DevelopersにホスティングされているSmoothnessというテーマを読み込みます。
|
1 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> |
これでjQuery UIの導入は完了です。
jQuery UIの使い方
jQuery UIには、カレンダー、ダイアログなどのUIを提供する「Widgets」とアニメーション効果などを拡張する「Effects」の２つが含まれています。
Widgetsを使ってみる
Widgetsの例として、カレンダーを作成してみます。 要素を選択しjQuery UIのメソッド datepicker();を実行するだけでカレンダーができます。
|
1 2 3 |
$(function() { $( "#sample-calender" ).datepicker(); }); |
|
1 |
<p>日付を選ぶ：<input type="text" id="sample-calender"></p> |
そのほかのWidgetも、ほとんどが同じように要素を選択してメソッドを実行するだけで作成できるので非常に簡単です。
Effectsを使ってみる
jQueryのアニメーション効果を拡張するのが、jQuery UIのEffectsです。show()、hide()のアニメーション効果などが追加されます。 このように、簡単にアニメーション効果つきのUIが作成できるのでjQuery UIは非常に便利です。 一方で、JavaScriptファイルの読み込みが増える、拡張がしにくいなどのデメリットもあるので、導入する時はさまざまな面から検討したほうが良いでしょう。
