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

標準的なクリックで切り替えるタブをはじめ、さまざまな機能を備えたタブコンテンツをクリーンなHTMLで簡単に実装できるjQueryのプラグインを紹介します。

サイトのキャプチャ

Tabslet
Tabslet -GitHub

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」に変更するだけです。

top of page

©2017 coliss