jQuery UIのタブメニュー

2012/07/25

Javascript

jQuery UIとは、jQuery公式のユーザインターフェース(UI)用のライブラリのことですが、これを活用することで、カレンダー・タブメニュー・アコーディオン・ダイアログ・エフェクト・表示切替・ドラッグ移動・サイズ変更・スライダー等、様々なユーザインターフェース(UI)を簡単に導入することができます。
今回は、jQuery UIのタブメニューについて紹介します。

Keyword：jQuery,jQuery UI,タブメニュー

jQuery UIのタブメニュー

以下の順で紹介していきます。
※テキストリンクをクリックすると、その箇所までページがスクロールします。

jQuery UIのサイトから必要なライブラリをダウンロードする
ファイル側の設定とオプション
デモページでの表示確認

jQuery UIのサイトから必要なライブラリをダウンロードする

以下のページへアクセス
⇒ jQuery UIサイト

1.タブメニュー実装用に必要なライブラリを選択する

jQuery UIのサイトから必要なライブラリをダウンロードする

補足

“Deselect all components”をクリックし、全てのチェックを外します。

次に、Widgetsの項目から”Tabs”をクリックします。
UI Coreの項目の”Core”と”Widgets”には、自動的にチェックが入ります。
※2012.7.23時点の最新バージョン1.8.21を使用します。

2.オリジナルのテーマで作成する

オリジナルのテーマで作成する

補足

右側にある”design a custom theme”をクリックします。

画面が切り替わりますので、”Roll Your Own”タブが選択されていることを確認し、”Font Settings”から始まる各項目の値を変更していくと、右側にオリジナルのテーマ結果が反映されます(※今回タブメニューを作成しますので、”Tabs”の画面を確認します)。

3.Galleryから既存のテーマを選択する

Galleryから既存のテーマを選択する

補足

Galleryから既存のテーマを指定する場合、”Gallery”タブを選択します。

サムネイル表示されているテーマから好みのものを選択すると、右側にテーマ結果が反映されます(オリジナルのテーマより簡単にタブメニューを作成できます)。
※後に紹介するデモページでは、Galleryのテーマを使用しています。

4.テーマをダウンロードする

テーマをダウンロードする

補足

Galleryで選択したテーマをダウンロードしてみましょう。

”Gallery”タブから”Roll Your Own”タブに切り替えると、Galleryで選択したテーマが反映された状態で”Downloadボタン”が表示されますので、クリックしてファイルをダウンロードします。

5.ダウンロードしたファイルを確認する

ダウンロードしたファイルを確認する

補足

“jquery-ui-バージョン.custom.zip”というzip圧縮されたファイルがダウンロードできますので、解凍し中身を見てみると、サンプルのhtmlファイル・CSSファイル・Javascriptファイル等が入っています。

使用するのは、jQueryの2ファイル、CSSの1ファイル、CSSで使用する画像ファイルです(※同梱されているアイコン画像は、使わないのであれば削除しても構いません)。
htmlファイルはソースの参考用に使用してください(※使用したいサイト構成に合わせて書き換えます。また、このhtmlファイルは、アイコン等タブメニュー以外のものも含まれていたり、文字コードがiso-8859-1になっていたり、ヘッダーにCSSが書かれていたりするので、ソースを参考にしながら、サイト構成に合わせて書き換えます)。

ファイル側の設定とオプション

タブメニューを表示させたいファイルのヘッダーに以下を記述します。

index.html(ヘッダー)

<head>
<link type="text/css" href="css/○○○○○/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#tabs').tabs();
});
</script>
</head>

補足

ヘッダーにダウンロードしたライブラリのCSSとJavascriptを読み込みます。

2行目はCSSファイルで、”○○○○○”は、ライブラリをダウンロードした際、テーマ名の付いたフォルダ内にCSSファイルとCSSで使用する画像が格納されています(※テーマ名の付いたディレクトリが必要ない場合、ディレクトリとここの記述を削除します)。

3行目はjQuery、4行目はjQuery UIのJavascriptファイルです。

5～9行目のスクリプトの記述は、bodyタグ内に記述しても構いません。

タブメニューを表示させたいファイルのbodyタグに以下を記述します。

index.html(bodyタグ)

<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Menu1</a></li>
<li><a href="#tabs-2">Menu2</a></li>
<li><a href="#tabs-3">Menu3</a></li>
</ul>
<div id="tabs-1">
Menu1の内容を表示
</div>
<div id="tabs-2">
Menu2の内容を表示
</div>
<div id="tabs-3">
Menu3の内容を表示
</div>
</div>
</body>

補足

2行目のid属性値は、ヘッダーに記述したスクリプトと合わせます。
※“$(‘#tabs’)”の”tabs”にする。

3～7行目がタブ表示部分。
対応するid属性値をフラグメント形式(#～)で設定します。

8～16行目がそれぞれのタブに切り替えた際に表示される部分です。

ダウンロードしたファイル内に含まれるindex.htmlには、ヘッダー部分にCSSが記述されています。このCSSを使用する場合、ヘッダーの記述をjquery-ui-1.8.21.custom.cssにコピーしておきましょう。細かい調整が必要な場合は、CSSを編集し調整してください。

いくつかjQuery UI Tabsに用意されているオプションを紹介します。

オプション

// 指定したタブを選択状態にする
$('#tabs').tabs({ selected: 1 });

// 選択したタブをクリックした際に折りたたむ
$('#tabs').tabs({ collapsible: true });

// Cookieにキャッシュを保存する
$('#tabs').tabs({ cookie: { expires: 7} });

// フェードイン・フェードアウトしながらタブを切り替える
$('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });

// スライドしながらタブを切り替える
$('#tabs').tabs({ fx: { height: 'toggle', duration: 'slow' } });

// フェードイン・フェードアウト・スライドしながら自動でタブを切り替える
$('#tabs').tabs({ fx: { opacity: 'toggle', height: 'toggle', duration: 'slow' } }).tabs('rotate', 3000);

補足

●指定したタブを選択状態にする
“selected: 0″で1番初めのタブが選択状態になります。
例では”1″ですので、2番目のタブが選択状態になります。

●選択したタブをクリックした際に折りたたむ
選択時に表示されているタブをクリックすると、タブコンテンツを折りたたみます。
※タブ部分のみが表示されます。

●Cookieにキャッシュを保存する
例では”expires: 7″としていますので、7日間Cookieを保存します。
ユーザーがブラウザキャッシュをクリアしなければ、設定した期間”以前開いていたタブが選択状態になっている”ということです。
また、”jquery.cookie.js”も必要ですので、以下サイトよりダウンロードして読み込むようにしてください。
⇒ jquery-cookieをダウンロード

●フェードイン・フェードアウトしながらタブを切り替える
opacity: ‘toggle’でフェードイン・フェードアウト、duration: ‘slow’で速さを指定します(※durationには、normalやfastもあります)。

●スライドしながらタブを切り替える
height: ‘toggle’でスライド、duration: ‘slow’で速さを指定します(※durationには、normalやfastもあります)。

●フェードイン・フェードアウト・スライドしながら自動でタブを切り替える
フェードイン・フェードアウト・スライドに関しては上記と同じです。
‘rotate’, 3000で自動でタブが切り替わります。
3000は1/1000秒です(3秒)。