今回はYahoo! UI LibraryのUIの1つであるタブ機能について説明します。このタブ機能はHTMLタグに特定のクラスを設定しスクリプトを1行呼び出すだけでUIを作成できます。タブを使って、Webサイトの表示内容を複数に区分したい場合などには最適なライブラリとなるでしょう。

Yahoo! UI Libraryの入手

まず、Yahoo! UI Libraryを入手しましょう(*1)。Yahoo! UI Libraryのダウンロードは以下のURLにある「Download YUI」のボタンをクリックします。

Yahoo! UI Libraryの入手

ダウンロードしたファイルはZIP形式になっているので解凍します。解凍するとbuild, docs, examplesフォルダとREADMEファイルがあります。今回必要になるファイルは下図に示すハイライトされたファイルです。

解凍図

これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは下図のフォルダ構成になっています。

本稿の構成

*1ここではYahoo! UI Libraryの最新版であるバージョン2.4.1で説明します。なお、タブ機能はβ版のエレメント処理を利用しているため、正式版になった場合にはHTMLおよびスクリプトファイル名などを変更する必要があります。