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

 jQuery UIのTabsを使うには、まずこのファイルをダウンロードします。「http://ui.jquery.com/download」に接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Tabs」のチェックをオンにしてダウンロードします。また、ダウンロードする際に、JavaScriptを圧縮してサイズを小さくすることもできます。

 なお、jQuery UIはjQueryをベースに動作しますので、jQuery本体も別途ダウンロードしておく必要があります。

 jQuery UIは、スタイルシートと組み合わせて使います。jQuery UIのサイトには「ThemeRoller」というページがあって、スタイルシートを自動的に作ることができます。Theme Rollerのページのアドレスは、「http://ui.jquery.com/themeroller」です。

 Tabsのタブのデザインも、Theme Rollerで行うことができます。あらかじめ用意されているスタイルを選んだり、Theme RollerのWebページでデザインをカスタマイズしたりすることができます(画面3)。

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

 Tabsを使うには、まずHTMLのヘッダーにリスト1のタグを入れます。「/path/to」の部分は、HTMLとjQuery等のディレクトリ関係に応じて変えます。

 一方、body要素の中で、タブにしたい部分をリスト2のようにします。タブはul/li要素で表し、タブに表示する内容をdiv要素で表します。