[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
Post on:2015年1月26日
sponsors
CSS3を使った軽量でかっこいいさまざまなアニメーションでコンテンツを表示するタブコンテンツを実装するjQueryのプラグインを紹介します。
タブコンテンツのスタイルも豊富に用意されており、シンプルなHTMLで簡単に実装できる優れ物です。
PWS Tabsのデモ
タブのデザインはシンプルなフラットスタイル、上部のカラーアイコンから9種類のテーマが選べます。
デモでは、さまざまなタブの実装例があります。
デモページ: Effect: Scale
タブ3つのシンプルなデモ、「Scale」のエフェクトでコンテンツを切り換えます。
デモページ: Effect: Slide Left
切り換えのエフェクトは5種類、「Slide Left」は左からスライドします。
デモページ: Tabs Position: Vertical Left
タブを配置する場所もオプションで簡単に変更できます。
PWS Tabsの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。
<head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="jquery.pwstabs-1.2.0.js"></script> </head>
Step 2: HTML
各コンテンツをdiv要素で配置し、ラッパーで内包します。
タブはスクリプトで実装されるので、必要ありません。
<div class="hello_world"> <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div> <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div> <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div> </div>
Step 3: JavaScript
jQueryのセレクタでラッパーを指定し、スクリプトを実行します。
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
スクリプトのオプションでは、タブの表示位置（水平・垂直・上下左右）、エフェクトの種類、タブのデザインなどが設定できます。
現在はベータ版ですが、レスポンシブ対応もオプションで設定できます。
スマホ時の表示
sponsors
