[JS]簡単で楽ちん!さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs

CSS3を使った軽量でかっこいいさまざまなアニメーションでコンテンツを表示するタブコンテンツを実装するjQueryのプラグインを紹介します。

タブコンテンツのスタイルも豊富に用意されており、シンプルなHTMLで簡単に実装できる優れ物です。

サイトのキャプチャ

PWS Tabs -GitHub

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

top of page

©2018 coliss