jQuery UIはjQueryを基に構築された公式JavaScriptのライブラリです。
マウスベースのインタラクションやアニメーション、テーマを適用可能なダイアログや日付Datepickerといったウィジェットが提供される。
jQuery UIを利用して、簡単に機能豊富のウェブページを作れます。
オフライン利用
オフライン利用のため、ローカルにダウンロードが必要です。
ここからダウンロードします。
バージョンと使う機能、及びテーマを選べます。
jQuery UIはいろいろテーマを提供しています。
http://jqueryui.com/themeroller/
ダウンロードしたファイルを引用します。
jQueryベースですので、jQueryの引用も必要です。
[html]
<!–jQuery–>
<script src="js/jquery-1.10.2.js"></script>
<!–jQuery UI–>
<script src="js/jquery-ui-1.10.4.js"></script>
<!–jQuery UI theme–>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" type="text/css" />
[/html]
オンライン
jQueryとjQuery UI両方ともダウンロードせず、直接URL引用してオンラインで使えます。
[html]
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css" type="text/css" />
[/html]
オンラインもいろいろテーマを使えます。使えるテーマを纏めます。代表的なカレンダーで配色パターンを例とします。
| Black Tie
http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.min.css |
 |
| Blitzer
http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.min.css |
 |
| Cupertino
http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css |
 |
| Dark Hive
http://code.jquery.com/ui/1.10.3/themes/dark-hive/jquery-ui.min.css |
 |
| Dot luv
http://code.jquery.com/ui/1.10.3/themes/dot-luv/jquery-ui.min.css |
 |
| Eggplant
http://code.jquery.com/ui/1.10.3/themes/eggplant/jquery-ui.min.css |
 |
| Flick
http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.min.css |
 |
| Hot Sneaks
http://code.jquery.com/ui/1.10.3/themes/hot-sneaks/jquery-ui.min.css |
 |
| Humanity
http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.min.css |
 |
| Le frog
http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.min.css |
 |
| Mint choc
http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.min.css |
 |
| Overcast
http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.min.css |
 |
| Pepper ginder
http://code.jquery.com/ui/1.10.3/themes/pepper-grinder/jquery-ui.min.css |
 |
| Redmond
http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css |
 |
| Smoothness
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css |
 |
| South street
http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.min.css |
 |
| Start
http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.min.css |
 |
| Sunny
http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.min.css |
 |
| Swanky purse
http://code.jquery.com/ui/1.10.3/themes/swanky-purse/jquery-ui.min.css |
 |
| Excite bike
http://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.min.css |
 |
| Trontastic
http://code.jquery.com/ui/1.10.3/themes/trontastic/jquery-ui.min.css |
 |
| ui-lightness
http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css |
 |
| ui-darkness
http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.min.css |
 |
| Vader
http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.min.css |
 |
