カテゴリー: jQuery UI

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

jQuery UIはjQueryを基に構築された公式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

jQuery UIを使ってタブメニューを作成

基本のJavaScriptとCSSだけでタブメニューを作成のは大変面倒くさいです。
jQuery UIを利用して、簡単にタブメニューを作成の方法を紹介します。
シンプルのタブから、いろいろカスタマイズも説明します。

jQueryとjQuery UIのインストールはここを参照してください。

1、基本のタブメニューを作成

先ず、こんな形HTMLを準備してください。作成したいタブ数で<li>タグを書きます。
各<li>に対応する<div>も書きます。
<a>の属性hrefの値と<div>のidが一致しないといけないことを注意してください。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">日本酒</a></li>
    <li><a href="#tabs-2">焼酎</a></li>
    <li><a href="#tabs-3">ビール</a></li>
  </ul>
  <div id="tabs-1">
    <p>・獺祭<br/>・十四代<br/>・久保田</p>
  </div>
  <div id="tabs-2">
    <p>・佐藤<br/>・魔王<br/>・百年の孤独</p>
  </div>
  <div id="tabs-3">
    <p>・朝日<br/>・YEBISU<br/>・麒麟</p>
  </div>
</div>

tabs()函数をコールして、タブを生成します。
HTMLロード時にタブ生成するため下記JavaScriptを実行させます。

$("#tabs").tabs();

これで、タブメニューが生成されました。

jquery-ui-tabs-normal
jQueryUIで作成したタブ

2、折り畳めるタブを作成

tabs()函数を使用時に、オプションがサポートされます。
collapsible: trueを指定して、折り畳めるタブを作成できます。

$("#tabs").tabs({
collapsible: true
});

タブメニューを二度クリックしてタブの折り畳みと展開の切替できます。

3、マウスオーバーでタブを切替

デフォルトはクリックでタブを切替する。
event: “mouseover”を指定して、マウスオーバーでタブを切替になります。

$("#tabs").tabs({
event: "mouseover"
});

4、順番が変えれるタブメニュー

マウスでタブをドラッグ＆ドロップしてタブの順番を変えます。

var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
  axis: "x",
  stop: function() {
	tabs.tabs( "refresh" );
  }
});

5、タブメニューを底部表示

タブメニューを中身の底部で表示させます。
JavaScriptでDOMを操作します。
タブのクラス(ui-tabs-nav)でタブを取得してappendToを使って底部に移動します。
これだけタブの丸角は上のままになっていますので、ui-corner-bottomのクラスを追加して丸角を底部に変更します。
JavaScriptはこんな感じです。

$( "#tabs" ).tabs();
// classでタブを探す、上の丸角を直角に、下の直角を丸角に変更する
$( "#tabs .ui-tabs-nav, #tabs .ui-tabs-nav > *" )
  .removeClass( "ui-corner-all ui-corner-top" )
  .addClass( "ui-corner-bottom" );
// タブを下に移動する
$( "#tabs .ui-tabs-nav" ).appendTo( "#tabs" );

出来ました！

jquery-ui-tabs-buttom
タブを底部表示

6、横でタブメニューを表示

ちょっと工夫します、CSSで横メニューの仕様を調整します。

<style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>

javascriptでタブにclassを追加します

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

出来たタブはこんな感じです。

jquery-ui-tabs-left
タブを横で表示

以上、jQueryUIを利用して、タブの作り方です。