[jQuery]ページをタブ表示するjQuery UI Tabs

これからページのタブ表示は必須かなと感じてる中、タブ表示をシンプルかんたんに実装できるサイトがありました。
jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法らしく、
Web上でデザインを選んだり、カスタマイズできるみたいです。

ここのサイトに載ってたので、引用メモ。

シンプル・便利な「jQuery UI Tabs」を使ってみよう
長?いページもスッキリ！jQueryでタブ表示

Tabsをダウンロードしてみよう

jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替え られるようにするものです。

jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Tabs」のチェックをオンにしてダウンロードします（下の画面を参照）。その際に、JavaScriptのコードを圧縮してサイズを小さくすることもできます。

jQuery UIのダウンロードページ

なお、jQuery UIはjQueryをベースに動作しますので、jQuery本体も別途ダウンロードしておきましょう。

続いてテーマのダウンロード

jQuery UIは、スタイルシートや画像と組み合わせて使います。jQuery UIのサイトには「ThemeRoller」というページがあり、スタイルシートを自動的に作ることができます。

Tabsのタブのデザイン（テーマ）も、Theme Rollerで作成できます。あらかじめ用意されているスタイルから選んだり、Theme RollerのWebページでデザインをカスタマイズすることができます。

テーマのファイルのダウンロードが終わったら、jQuery本体／jQuery UI Tabs／テーマのCSSファイルと、CSSで使う画像のフォルダを、1つのフォルダにまとめましょう。

Tabsを使ってみよう

Tabsを使うには、まずHTMLのヘッダーに以下のタグを入れます。「/path/to」の部分は、HTMLとjQueryなどのディレクトリ関係に応じて変えてください。

■ヘッダーに入れるタグ

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-ui.js"></script>
<link type="text/css" href="/path/to/ui.core.css" rel="Stylesheet" />
<link type="text/css" href="/path/to/ui.theme.css" rel="Stylesheet" />
<link type="text/css" href="/path/to/ui.tabs.css" rel="Stylesheet" />

次に、body要素の中で、タブにしたい部分を以下のようにします。タブはul／li要素で表し、タブに表示する内容をdiv要素で表します。そして、タブ部分全体のdiv要素に対して、jQuery UI Tabsの「tabs」という関数を実行します。

■タブにしたい部分の組み方

<div id="タブ部分全体のID">
??<ul>
????<li><a href="#タブ1のID">タブ1に表示する文字列</a></li>
????<li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
????・・・
????<li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
??</ul>
??<div id="タブ1のID">
　　タブ1の内容
??</div>
??<div id="タブ2のID">
　　タブ2の内容
??</div>
　・・・
??<div id="タブnのID">
　　タブnの内容
??</div>
</div>
<script type="text/javascript">
??$('#タブ部分全体のID').tabs();
</script>

筆者のWebサイトには、実際に動作するjQuery UI Tabsのサンプルページを用意しました。具体的なHTMLのコードはこのサンプルを参照のうえ、試してみてください。

http://www.h-fj.com/ascii/jquery_tabs/sample.html

こんどタブつくることあったらやってみよー。

■jQuery初心者の方はこちらの本がおすすめです。

Popularity: 57% [?]