MooTabsとは？

MooTabsはMooToolsをベースにしたタブ機能を実現するライブラリです。タブ機能を実現しているライブラリはYahoo UI Library、Adobe Spryなど探せば、かなり多数のライブラリがあります。MooTabsはMooToolsをベースにしているのでタブを切り替える際に、ちょっとしたアニメーションを伴って表示されるという特長があります。また、非同期通信を利用してタブの内容を表示することができます。

MooTabsは、このURLからダウンロードすることができます。Downloadのカテゴリの「MooTabs 1.2」のリンクをクリックするとダウンロードされます。圧縮形式が一般的なZIP形式ではなくRAR形式になっているので、解凍する場合にはRAR形式を扱えるものを利用する必要があります。

MooTabs公式サイト

解凍するとmootabs1.2.cssとmootabs1.2.jsのファイルになります (*1)。

解凍後の展開図

MooTabsはMooToolsを利用しているためWebサイトからMooToolsをダウンロードする必要があります。MooToolsは必要な機能を選択してダウンロードすることができます。よく分からない場合は、全てにチェックを入れてダウンロードしてください。本サンプルでも全ての機能を有したMooToolsライブラリを使用しています。MooTabsはMooToolsのバージョン1.1以降で動作します。

mootools.netにアクセスしてダウンロードをクリック

downloadページでは、すべてのチェックボックスにチェックを入れて

[ダウンロード]ボタンをクリックする

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

本稿でのファイル構成

*1 現在のMooTabs 1.2のデフォルトのスタイルシート設定ではOperaではタブの縦幅が他のブラウザより高くなってしまう不具合があります。