jquery ui
0

jQuery UIのインストールと使い方紹介

LINEで送る
Pocket

jQuery UIjQueryを基に構築された公式JavaScriptのライブラリです。
マウスベースのインタラクションやアニメーション、テーマを適用可能なダイアログや日付Datepickerといったウィジェットが提供される。
jQuery UIを利用して、簡単に機能豊富のウェブページを作れます。

オフライン利用

オフライン利用のため、ローカルにダウンロードが必要です。
ここからダウンロードします。
バージョンと使う機能、及びテーマを選べます。
jqueryui-intro1
jqueryui-intro2
jQuery UIはいろいろテーマを提供しています。
http://jqueryui.com/themeroller/
jqueryui-intro3

ダウンロードしたファイルを引用します。
jQueryベースですので、jQueryの引用も必要です。

<!--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" />




オンライン

jQueryとjQuery UI両方ともダウンロードせず、直接URL引用してオンラインで使えます。

<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" />



オンラインもいろいろテーマを使えます。使えるテーマを纏めます。代表的なカレンダーで配色パターンを例とします。

Black Tie

http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.min.css
jqueryui-theme-BlackTie
Blitzer

http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.min.css
jqueryui-theme-Blitzer
Cupertino

http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css
jqueryui-theme-Cupertino
Dark Hive

http://code.jquery.com/ui/1.10.3/themes/dark-hive/jquery-ui.min.css
jqueryui-theme-DarkHive
Dot luv

http://code.jquery.com/ui/1.10.3/themes/dot-luv/jquery-ui.min.css
jqueryui-theme-DotLuv
Eggplant

http://code.jquery.com/ui/1.10.3/themes/eggplant/jquery-ui.min.css
jqueryui-theme-Eggplant
Flick

http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.min.css
jqueryui-theme-flick
Hot Sneaks

http://code.jquery.com/ui/1.10.3/themes/hot-sneaks/jquery-ui.min.css
jqueryui-theme-hotSneaks
Humanity

http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.min.css
jqueryui-theme-Humanity
Le frog

http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.min.css
jqueryui-theme-lefrog
Mint choc

http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.min.css
jqueryui-theme-MintChoc
Overcast

http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.min.css
jqueryui-theme-overcast
Pepper ginder

http://code.jquery.com/ui/1.10.3/themes/pepper-grinder/jquery-ui.min.css
jqueryui-theme-peppergrinder
Redmond

http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css
jqueryui-theme-redmond
Smoothness

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css
jqueryui-theme-smoothness
South street

http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.min.css
jqueryui-theme-SouthStreet
Start

http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.min.css
jqueryui-theme-start
Sunny

http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.min.css
jqueryui-theme-sunny
Swanky purse

http://code.jquery.com/ui/1.10.3/themes/swanky-purse/jquery-ui.min.css
jqueryui-theme-SwankyPurse
Excite bike

http://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.min.css
jqueryui-theme-ExciteBike
Trontastic

http://code.jquery.com/ui/1.10.3/themes/trontastic/jquery-ui.min.css
jqueryui-theme-Trontastic
ui-lightness

http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css
ui-lightness
ui-darkness

http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.min.css
jqueryui-theme-uidarkness
Vader

http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.min.css
jqueryui-theme-Vader


機能&使い方

1.タブメニューの作成
jquery-ui-tabs-normal

LINEで送る
Pocket

管理者

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です