[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet

サイト構築 -JavaScript

Post on:2013年9月26日

Tabsletのデモ

Tabsletは標準的なタブの機能だけでなく、多彩な機能も備えています。
デモは、Chrome, Safari, Firefoxでご覧ください、IEは7+対応です。

それぞれのデモは見た目は同じですが、機能が全て異なります。

Default: 標準的なタブでクリックでコンテンツを切り替えます。

Hover: クリックではなくホバーで操作ができます。

Animation: コンテンツがアニメーションで切り替わります。

Rotation: ローテーションでコンテンツを切り替えます。

Custom event: タブの切替時の前後にイベントを設定します。

Tabsletの使い方

Step 1: 外部ファイル

</body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script>

Step 2: HTML

タブをul要素で、各コンテンツをdivで実装します。
タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。

ラッパーのclassに「tabs」を指定し、機能を選択します。下記はデフォルトのタイプです。

<div class='tabs tabs_default'>
  <ul class='horizontal'>
    <li><a href="#tab-1">information</a></li>
    <li><a href="#tab-2">tab</a></li>
    <li><a href="#tab-3">tab</a></li>
  </ul>
  <div id='tab-1'><h3>This is the default tab functionality.</h3></div>
  <div id='tab-2'><h3>Tab 2</h3></div>
  <div id='tab-3'><h3>Tab 3</h3></div>
</div>

これで、クリックでコンテンツを切り替える標準的なタブを実装できます。
ホバーやアニメーションのタブに変更する時は、ラッパーのclassを「tabs_hover」「tabs_animate」に変更するだけです。