HOME>WEBプログラム覚書>[jQuery]余計なことをしないタブのjQueryプラグイン

[jQuery]余計なことをしないタブのjQueryプラグイン

タブのサンプルやプラグインは多々あるのですが、文書構造が変だったり、デザインとか余計なことをしてくるのが多く使いにくかったので、適当に書いて使っていたものを jQueryのプラグインにしてみました。

動作サンプル

複数のタブを作成することも可能です。

サンプル

実行結果

見出し1

コンテンツ1の内容が入ります

見出し2

コンテンツ2の内容が入ります

見出し1

コンテンツ1の内容が入ります

見出し2

コンテンツ2の内容が入ります

Javascript

$('.app-tab2').tab({
headline: 'h5',
content: '.wrapper div'
});

HTML

<div class="app-tab2 ver-blue">
<div class="wrapper">
<div>
<h5>見出し1</h5>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<h5>見出し2</h5>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
</div>
</div>
<br />
<div class="app-tab2 ver-orange">
<div class="wrapper">
<div>
<h5>見出し1</h5>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<h5>見出し2</h5>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
</div>
</div>

CSS

.app-tab2 .tab-nav h5 {
display: inline-block;
background: #E5E5E5;
padding: 8px;
margin: 0 4px;
cursor: pointer;
}
.app-tab2 .tab-nav h5.active {
cursor: default;
}
.app-tab2 .wrapper {
padding: 8px;
background: #FFFFFF;
border-style: solid;
border-width: 8px
}
.app-tab2.ver-blue .wrapper {
border-color: dodgerblue;
}
.app-tab2.ver-blue .tab-nav h5.active {
background: dodgerblue;
}
.app-tab2.ver-orange .wrapper {
border-color: orange;
}
.app-tab2.ver-orange .tab-nav h5.active {
background: orange;
}

最初に開いているコンテンツを変更したり、スピードを変えてみたり。

サンプル

実行結果

見出し1

コンテンツ1の内容が入ります

見出し2

コンテンツ2の内容が入ります

見出し1

コンテンツ1の内容が入ります

見出し2

コンテンツ2の内容が入ります

見出し3

コンテンツ3の内容が入ります

Javascript

$('.app-tab3').tab({
headline: 'h5',
content: '.wrapper div',
open: 1,
duration: 'fast'
});
$('.app-tab4').tab({
headline: 'h5',
content: '.wrapper div',
open: 2,
duration: 'slow'
});

HTML

<div class="app-tab3 ver-red">
<div class="wrapper">
<div>
<h5>見出し1</h5>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<h5>見出し2</h5>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
</div>
</div>
<br />
<div class="app-tab4 ver-red">
<div class="wrapper">
<div>
<h5>見出し1</h5>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<h5>見出し2</h5>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
<div>
<h5>見出し3</h5>
<ul>
<li>コンテンツ3の内容が入ります</li>
</ul>
</div>
</div>
</div>

CSS

.ver-red .tab-nav h5 {
display: inline-block;
background: #E5E5E5;
padding: 8px;
margin: 0 4px;
cursor: pointer;
}
.ver-red .tab-nav h5.active {
cursor: default;
background: darkred;
}
.ver-red .wrapper {
padding: 8px;
background: #FFFFFF;
border: 8px solid darkred;
border-width: 8px
}

ソース

tab.js

(function ($) {
'use strict';
$.fn.tab = function (config) {
var options = $.extend({
content : 'div', // 表示・非表示対象とするコンテンツ
headline : '.nav-list', // ナビゲーションにする要素
open : 0, // 最初にオープン状態にするコンテンツのIndex番号
navClass : 'tab-nav', // ナビゲーションのClass名
activeClass : 'active', // オープン状態のナビ、コンテンツに付けられるClass名
duration : 'normal' // タブ切替時のアニメーションの速度
}, config);
this.each(function () {
var contents = $(this).find(options.content),
nav = $('<div></div>', { 'class': options.navClass });
contents.each(function (i) {
var headline = $(this).find(options.headline);
headline.addClass('nav-ctrl-' + i).data('index', i);
if (i === options.open) {
$(this).addClass(options.activeClass);
headline.addClass(options.activeClass);
} else {
$(this).hide();
}
});
nav.prepend(contents.find(options.headline));
nav.on('click', function (e) {
if ($(e.target).data('index') !== undefined) {
options.open = $(e.target).data('index');
$(this).children().each(function (i) {
if (i === options.open) {
$(this).addClass(options.activeClass);
} else {
$(this).removeClass(options.activeClass);
}
});
contents.each(function (i) {
if (i === options.open) {
$(this).fadeIn(options.duration);
$(this).addClass(options.activeClass);
} else {
$(this).hide().removeClass(options.activeClass);
}
});
}
});
$(this).prepend(nav);
});
return this;
};
}(jQuery));

使い方

読み込み

jQuery本体とtab.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./tab.js"></script>

マークアップ

ナビゲーション部分は自動生成するのでJavascriptが無効でも読めて、コンテンツの数や内容が多くなってもコーディングが楽です。

サンプル

実行結果

見出し1

コンテンツ1の内容が入ります

見出し2

コンテンツ2の内容が入ります

見出し3

コンテンツ3の内容が入ります

Javascript

$('.app-tab').tab();

HTML

<div class="app-tab">
<div>
<h5 class="nav-list">見出し1</h5>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<h5 class="nav-list">見出し2</h5>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
<div>
<h5 class="nav-list">見出し3</h5>
<ul>
<li>コンテンツ3の内容が入ります</li>
</ul>
</div>
</div>

CSS

.app-tab .tab-nav h5 {
display: inline-block;
background: #E5E5E5;
padding: 8px;
margin: 0 4px;
cursor: pointer;
}
.app-tab .tab-nav h5.active {
background: #CC9999;
cursor: default;
}

上記実行後のHTMLは

<div class="app-tab">
<div class="tab-nav">
<h5 class="nav-list nav-ctrl-0 active">見出し1</h5>
<h5 class="nav-list nav-ctrl-1">見出し2</h5>
<h5 class="nav-list nav-ctrl-2">見出し3</h5>
</div>
<div>
<ul>
<li>コンテンツ1の内容が入ります</li>
</ul>
</div>
<div>
<ul>
<li>コンテンツ2の内容が入ります</li>
</ul>
</div>
<div>
<ul>
<li>コンテンツ3の内容が入ります</li>
</ul>
</div>
</div>

となります。上記HTMLに対してCSSを設定することになります。

オプション

オプション	デフォルト	内容
content	div	表示・非表示対象とするコンテンツ
headline	.nav-list	ナビとして利用する要素。上記 content で指定した要素の子要素を検索します。
open	0	最初に表示状態にするコンテンツのIndex
navClass	tab-nav	ナビゲーションのクラス名
activeClass	active	オープン状態のナビに付加されるクラス名
duration	normal	切替時のアニメーションの速度

その他

.tab()とかいうメソッド名は重複しやすいので気をつけてくださいｗ
googleさん的には、どのタブが開いてるかがURLでわかるのが望ましいらしいのです。 (1つめのタブがアクテイブな状態と2つめのタブがアクティブな状態はURLで区別つける)
動作はIE11、Chorome21でのみ確認。jQueryは1.10.2でのみ確認。

投稿日	2013年12月11日 05:16
カテゴリ	JavaScript
タグ	jQuery
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1342

コメントする

Name

Email Address

URL

コメント(スタイル用のHTMLタグを使えます)

ログイン情報を記憶

[jQuery]余計なことをしないタブのjQueryプラグイン

動作サンプル

サンプル

実行結果

見出し1

見出し2

見出し1

見出し2

Javascript

HTML

CSS

サンプル

実行結果

見出し1

見出し2

見出し1

見出し2

見出し3

Javascript

HTML

CSS

ソース

使い方

読み込み

マークアップ

サンプル

実行結果

見出し1

見出し2

見出し3

Javascript

HTML

CSS

オプション

その他

コメント

コメントする

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Tag