[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
Post on:2015年1月26日
sponsorsr
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を外部ファイルとして記述します。
[html]
...
[/html]
Step 2: HTML
各コンテンツをdiv要素で配置し、ラッパーで内包します。
タブはスクリプトで実装されるので、必要ありません。
[html]
[/html]
Step 3: JavaScript
jQueryのセレクタでラッパーを指定し、スクリプトを実行します。
[javascript]
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
[/javascript]
スクリプトのオプションでは、タブの表示位置（水平・垂直・上下左右）、エフェクトの種類、タブのデザインなどが設定できます。
現在はベータ版ですが、レスポンシブ対応もオプションで設定できます。
スマホ時の表示
sponsors
