[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js

シンプルなHTMLで、切替に4種類のエフェクトを備えたタブコンテンツを簡単に実装できるjQueryのプラグインを紹介します。

Tabulous.js
Tabulous.js -GitHub

• Tabulous.jsのデモ
• Tabulous.jsの使い方

Tabulous.jsのデモ

デモはCSS3対応ブラウザでご覧ください。
最近は、デモページもかっこいいデザインなのが増えましたね。

デモ

デモでは4種類のエフェクトがあります。
まずは「Scale」、フェードでサイズを変更してコンテンツを切り替えます。

デモ：Scale

2つ目は「Slide」、スライドでコンテンツを切り替えます。

デモ：Slide

3つ目は「Scale Up」、1つ目の「Scale」とは異なり拡大フェードで切り替えます。

デモ：Scale Up

4つ目の最後は「Flip」、くるっとさせてコンテンツを切り替えます。

デモ：Flip

Tabulous.jsの使い方

実装は非常にシンプルで、エフェクトの設定も簡単です。

Step 1: 外部ファイル

当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

Step 2: HTML

HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1" title="">Tab 1</a></li>
    <li><a href="#tabs-2" title="">Tab 2</a></li>
    <li><a href="#tabs-3" title="">Tab 3</a></li>
  </ul>

  <div id="tabs_container">
    <div id="tabs-1"><!--Tab 1のコンテンツ--></div>
    <div id="tabs-2"><!--Tab 2のコンテンツ--></div>
    <div id="tabs-3"><!--Tab 3のコンテンツ--></div>
  </div><!--End tabs container-->	
</div><!--End tabs-->

Step 3: JavaScript

jQueryのセレクタでタブコンテンツ全体のラッパーを指定し、スクリプトを実行します。

$(document).ready(function ($) {
    $('#tabs').tabulous({);
});

オプション

スクリプトのオプションでは、上記デモのエフェクトを選択できます。
ex) scale / slideLeft / scaleUp / flip

$('#tabs').tabulous({
    	effect: 'scale'
});