POPSブログ

jQuery Tabs/1

183

  Category:  jquery2012/12/20 pops 

一般的にTab-Menu等と組み合わせてコンテンツを切り替え表示する様式のものをTabsと呼ばれているようです。jquery-UIでも簡単に作れますが、ライブラリーを使うほどでもない場合に自作するのも簡単です。

 

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

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


Tabs によるコンテンツ切り替え A (外枠有り)


Example A


  • 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で開くようにしています。


<div id="tabs-base">
	<ul id="tab-index">
		<li class="active">題目1</li>
		<li>題目2</li>
		<li>題目3</li>
		<li>題目4</li>
	</ul>
	<div id="tabs-block">
		<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>
</div>

div #tabs-base #tabs-block は外枠です、全体のデザインなどがやり易くなります。


画像だけの場合


<div id="tabs-base">
	<ul id="tab-index">
		<li class="active">題目1</li>
		<li>題目2</li>
		<li>題目3</li>
		<li>題目4</li>
	</ul>
	<div id="tabs-block">
		<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>
	</div>
</div>

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


JS

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

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

tabs01.js


//tabs01.js

(function($){

	$(function () {

		//コンテンツ open
		$("#tabs-block .tabs-content").addClass("close");
		$("#tabs-block .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-block .tabs-content").eq(number).addClass("open").siblings(".tabs-content").removeClass("open");

		});

	});

})(jQuery);


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


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

andSelf()で番号取得する場合の書き方の例です。処理の内容によっては使い道があるので記載しておく。


現在

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

こちらでもOK

//andSelf()で番号取得
var number=$(this).andSelf().index();


CSS

tabs01.css (TEXT表示用)


/* tabs01.css 日本語 */

#tabs-base {
position:relative;
display:block;
width:640px;
height:auto;
margin:0;
padding:0;
background-color:#FFFFFF;
overflow:hidden;
}

#tabs-base #tab-index {
display:inline-block;
list-style:none;
width:100%;
height:30px;
margin:0;
padding:0;
}
#tabs-base #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;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tabs-base ul li {
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;
}

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

#tabs-base #tabs-block {
display:block;
width:640px;
height:auto;
margin:0;
padding:0;
background-color:#000000;
overflow:hidden;
}
#tabs-block .tabs-content {
display:block;
width:640px;
height:auto;
background-color:#FFFFFF;
}
#tabs-block .tabs-content.close {
display:none;
}
#tabs-block .tabs-content.open {
display:block;
}

サンプルのCSS例です。変更などは自由です。
コンテンツ内部のCSSは、使用者が表示内容状況に応じて書くことになります。


簡単な解説


説明図


1. TabMenuの押された位置に対応するコンテンツを、「表示」「非表示」の切り替えをCSSでしているに過ぎません。CSSで「非表示」の部分の高さが0になり「表示」指定の部分が競りあがり表示されるだけ。
2. 全体、及びコンテンツ部分が外枠でラップされた形式ですのでデザインに便利です。単純な構成にしたい場合は、次ぎのページに掲載のサンプル(外枠無し)を参照ください。
3. 最初に表示するコンテンツの指定をhtmlでするか、JSでするかの違いで若干スクリプトに違いがあるだけです。都合の良い形式を選べば良い。(htmlにクラス指定でCSSを設定すれば、ページ表示時に固定され、JSでの場合はhtmlにクラス指定するのを省けますが、ページ表示時動くだけの違いです)
4. コンテンツのCSSは最初は display:block で有り、open close クラスで表示非表示を行っている。(最初からコンテンツが非表示 display:none であると画像がある場合ブラウザによってはキャッシュせず、画像表示の時に読み込むので若干遅れる Safari Opera)


改造などの例


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

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


<div id="tabs-block">
	<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>
</div>

JSを書き換える


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

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

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

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

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


上の改造で、最後にJSに、.addClass("close")を追加するのは、最初が open で close がないからである。もし下記のようにすれば、
JSで、$('#tabs-block .tabs-content').eq(number).、、、を書き換える必要は無い。


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

こんな強引なクラス設定は通常は書かないと思うが、機能する。


● メニューのクラスを調べて自動でコンテンツを表示

メニューのactiveクラスを調べindex番号をえる、なければ0番指定して、メニューの最初をactiveクラスにする。
もしも、htmlにactiveクラスを書くのを忘れても機能する。


each() を使用して調べる例


//TabMenuのactiveクラスを調べる
var no=-1;
$("#tab-index li").each(function(i){
	//activeクラスの番号取得
	if ($(this).hasClass("active")) {no=i;}
});
//activeクラスが無ければ0番をactiveにする
if (no < 0) {$("#tab-index li").eq(0).addClass("active");no=0;}

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


filterで調べる例、andSelf()を活用。


//filterでメニューのクラスを調べindex番号をえる、なければ0番指定
var no=$("[class='active']","#tab-index").andSelf().index() || 0;
//TabMenuクラスactive
$("#tab-index li").eq(no).addClass("active");

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


次ぎのページは、外枠を使用しない単純構造の場合です。(#tabs-base #tabs-blockを削除)

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


以上です。

 


[ この記事の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]