POPSブログ

jQuery Tabs/2

184

  Category:  jquery2012/12/20 pops 

Tab-Menu等と組み合わせてコンテンツを切り替え表示するものです。前ページの「Tabs 1」の外枠を削除した単純構成のものです。機能などは同じになります。

 

簡単、単純なTabs (外側ラップの無い形式、IE6は一部CSS非対応)

下記サンプルのように、簡単に作れます。IE6非対応となっていますが、作動はします。CSS関係(擬似クラス:hoverを使用)が対応していないだけです。現在ではIE6に対応しなくとも良いと思います。CSSは自由ですから合わせてください。
尚、このサンプルでは角丸処理をCSS3で行っていますので、CSS3対応ブラウザのみ角丸になります。


Tabs によるコンテンツ切り替え B (外枠なし)


Example B


  • CONTENT1
  • CONTENT2
  • CONTENT3
  • CONTENT4

コンテンツ1

 

 

これはコンテンツ1の詳細文です。


コンテンツ2

 

 

これはコンテンツ2の詳細文です。

これはコンテンツ2の詳細文です。


コンテンツ3

 

 

これはコンテンツ3の詳細文です。

これはコンテンツ3の詳細文です。

これはコンテンツ3の詳細文です。


コンテンツ4

 

 

これはコンテンツ4の詳細文です。

これはコンテンツ4の詳細文です。

これはコンテンツ4の詳細文です。

これはコンテンツ4の詳細文です。



高さは固定でも可変でも、CSSで自由に出来る。コンテンツは使用者がHTMLで書き込む。


コンテンツの切替 : TEXT IMAGE :初期値 TEXT

コンテンツ高さの切替 : 200 auto :初期値 auto


 

HTML JS CSS など


Tabメニューに対応したコンテンツを切り替え表示するだけですから、色々な書き方があると思いますので、一例です。


HTML

文章などを表示する例と、画像を表示する例です。共にコンテンツ部分が異なるだけですから、何でも表示できます。

サンプルでは、初期のTabメニューはactiveクラスを与え、対応するコンテンツはJSで開くようにしています。


<ul id="tab-index">
	<li class="active">題目1</li>
	<li>題目2</li>
	<li>題目3</li>
	<li>題目4</li>
</ul>
<div class="tabs-content">コンテンツ1の詳細</div>
<div class="tabs-content">コンテンツ2の詳細</div>
<div class="tabs-content">コンテンツ3の詳細</div>
<div class="tabs-content">コンテンツ4の詳細</div>

前ページと比較して、外枠、div #tabs-base #tabs-block が削除されている。


画像だけの場合


<ul id="tab-index">
	<li class="active">題目1</li>
	<li>題目2</li>
	<li>題目3</li>
	<li>題目4</li>
</ul>
<div class="tabs-content"><img src="画像URL" width="幅" height="高さ" /></div>
<div class="tabs-content"><img src="画像URL" width="幅" height="高さ" /></div>
<div class="tabs-content"><img src="画像URL" width="幅" height="高さ" /></div>
<div class="tabs-content"><img src="画像URL" width="幅" height="高さ" /></div>

サンプルでは画像のみですが、画像前後に文字などを書いても良い。


JS

読み込めばすぐに実行する簡易形式です。必要な場合は、JS名、クラス名、ID名などかえて利用ください、その際には関連するCCSなども変更が必要です。

htmlに、open close クラスを書かないでJSで設定する

tabs01b.js


//tabs01b.js

(function($){
	$(function () {

		//コンテンツ、open
		$(".tabs-content").addClass("close");
		$(".tabs-content").eq(0).addClass("open");

		//click-action
		$("#tab-index li").click(function() {

			//タブメニュー番号取得、CSS切り替え
			var number=$("#tab-index li").index(this);

			$(this).addClass("active");
			$(this).siblings("li").removeClass("active");

			//番号対応のコンテンツ表示
			$(".tabs-content").eq(number).addClass("open").siblings(".tabs-content").removeClass("open").addClass("close");

		});

	});

})(jQuery);

理論的には、id がないので表示動作が遅くなるのですが、見た目「遅い」とは感じられません。コンテンツの量が多くなれば少し差が出るかも知れません。
また、前ページのように外枠があっても、このJSは使用できます。


開くコンテンツは、eq(0) で1番目を指定しています。2番目なら eq(1) にすればよい。


$(".tabs-content").eq(0).addClass("open");

CSS

tabs01b.css (TEXT表示用)


/* tabs01b.css 日本語 */

ul#tab-index {
display:inline-block;
list-style:none;
width:100%;
height:30px;
margin:0;
padding:0;
}
#tab-index li {
display:inline;
list-style:none;
width:80px;
height:30px;
line-height:30px;
font-size:12px;
font-weight:bold;
text-align:center;
margin-right:5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-radius-top-left:10px;
-webkit-border-radius-top-right:10px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}

#tab-index li.active {
background-color:#EEEEEE;
}
#tab-index li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

.tabs-content {
display:block;
width:630px;
height:auto;
padding:5px;
margin:0;
background-color:#EEEEEE;
overflow:hidden;
}
.tabs-content.close {
display:none;
}
.tabs-content.open {
display:block;
}

サンプルのCSS例です。変更などは自由です。注意、「ul li」は結構使用され独自のCSSが設定されている事が多い。 そのため、ul部分を認識するように、ここでは、ul#tab-index としている。ページの状況により使用者が適正に変更ください。
コンテンツ内部のCSSは、使用者が表示内容状況に応じて書くことになります。


簡単な解説


説明図


1. TabMenuの押された位置に対応するコンテンツを、「表示」「非表示」の切り替えをCSSでしているに過ぎません。CSSで「非表示」の部分の高さが0になり「表示」指定の部分が競りあがり表示されるだけ。
2. 全体、コンテンツ部分に外枠がない単純な構成です。余計なBOXの無いほうが良い方向けです。
3. 其の外は、前ページの外枠付きのものと同様です。
4. このJSは、前ページの様に外枠があっても使用できます。(原理的には認識が遅くなる)
5. 手軽に、ページの中で使用したい時など、こちらが利便性があると思います。


外枠ありのJSとの相違点

下記のようにJS最初と、最後の部分、3箇所が違うだけです。


外枠なし、このJSの場合

//コンテンツ、open
$(".tabs-content").addClass("close");
$(".tabs-content").eq(0).addClass("open");

//番号対応のコンテンツ表示
$(".tabs-content").eq(number)...........

----------------------------------------------------

外枠ありの場合

//コンテンツ、open
$("#tabs-block .tabs-content").addClass("close");
$("#tabs-block .tabs-content").eq(0).addClass("open");

$("#tabs-block .tabs-content").eq(number)...........

理由は、jqueryでの認識を早くするため、id(#tabs-block)を入れているだけです

改造などの例


● コンテンツに最初からクラスを書き込んで置く方法

コンテンツのクラスに close open を書き込んで置けばJSで処理する必要がないので、ページが読み込まれた時に動かない利点があります。
開くコンテンツに open 、閉じるコンテンツは close を書き込む。TabMenuと位置を合わせること。


<div class="tabs-content open">コンテンツ1の詳細</div>
<div class="tabs-content close">コンテンツ2の詳細</div>
<div class="tabs-content close">コンテンツ3の詳細</div>
<div class="tabs-content close">コンテンツ4の詳細</div>

JSを書き換える


JSで開く処理、これを削除、または機能しないようにする

//コンテンツ open
//$(".tabs-content").addClass("close");
//$(".tabs-content").eq(0).addClass("open");

--------------------------------------------------------
コンテンツ表示の処理に追加の処理を書く、最後に.addClass("close")を追加

//番号対応のコンテンツ表示
$(".tabs-content").eq(number).addClass("open").siblings(".tabs-content").removeClass("open");
を次ぎのように

$(".tabs-content").eq(number).addClass("open").siblings(".tabs-content").removeClass("open").addClass("close");

前ページのものは外枠の有る形式です。これとほぼ同様のものですが、JSの違いを比較ください。

【参考】当方の記事: jQuery Tabs 1


以上です。

 


[ この記事のURL ]


タグ:jquery , memo , series , Tabs

[ jQuery Tabs シリーズ記事 ]

jQuery Tabs/62012.12.25
jQuery Tabs/52012.12.23
jQuery Tabs/42012.12.22
jQuery Tabs/32012.12.21
jQuery Tabs/22012.12.20
jQuery Tabs/12012.12.20

 

ブログ記事一覧



[1]