POPSブログ

jQuery Tabs/6

188

  Category:  jquery2012/12/25 pops 

Tabsの形態ではあるが表示するコンテンツを、外部htmlファイルで読み込む、ページ内の指定した要素ブロックを表示するなどの工夫をしてみました。

 

Tabs、読み込み形式

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


外観は変わりませんが、以前のものは表示すべくコンテンツを挿入する時の html の書き方が非効率(区分するのが面倒、html が読み難くなる)でした。これは「ID」で表示ブロックを指定する方法なために幾分か、htmlの書き方が効率的且つ見易くなります。


Tabs によるコンテンツ切り替え E (読み込み形式)


Example E


  • INDEX1
  • INDEX2
  • INDEX3
  • INDEX4
  • INDEX5

インナーコンテンツ表示テスト

これは そのままのインナーコンテンツです。

 

 

 

 

 

#content1
#content2
/main/html/tab-test.html


注意、loadの場合JSがらみのものは作動しない事があるので単純なものに限る。

 

読み込み形式、テストJS


Tabメニューに対応したコンテンツを切り替え表示するだけですから、色々な書き方があると思いますので、一例です。
多少、効率化した書き方になっています。コンテンツ表示のため原則フェードなどはしませんが、改造は可能です。


HTML

次ぎのように記述します。

注意、以前のものと構造が違います。ID名も違います。( #tab-menu #tabs-block )

active open close クラスの記入の必要はありません。開きたい箇所はJSで設定します。


<ul id="tab-menu">
	<li>題目1</li>
	<li>題目2</li>
	<li>題目3</li>
	<li>題目4</li>
	<li>題目5</li>
</ul>
<div id="tabs-block">
	<div class="tabs-line inner">インナーコンテンツを記載</div>
	<div class="tabs-line inner">インナーコンテンツを記載</div>
	<div class="tabs-line content">ページ内コンテンツID名</div>
	<div class="tabs-line content">ページ内コンテンツID名</div>
	<div class="tabs-line load">パス及び、読み込むファイル名</div>
</div>

1. innerクラス:その場に記載されたインナーコンテンツを表示します。(以前の書き方)
2. contentクラス:ページ内の指定したID名のコンテンツを表示します。
記入例、#content1 など、最初に # を入れてください。
3. loadクラス:外部ファイルを読み込み表示します。(.html .txt)
記入例、html/test.html など。


上のサンプルでの記載例

但し、innerクラスはJSで判定していませんので省略しても構いません。content load は必要です。


<div class="tabs-line inner"><h3>インナーコンテンツ表示テスト</h3><p>...........</p></div>
<div class="tabs-line inner"><img src="/main/images/toyota_car10.jpg" /></div>
<div class="tabs-line content">#content1</div>
<div class="tabs-line content">#content2</div>
<div class="tabs-line load">/main/html/tab-test.html</div>

3種類の設定が可能ですが、contentクラスのみで使用した方が便利と思います。
事前に、ページのコンテンツの分割を「ID」をつけて行っていることが前提になります。


JS

必要な設定はJS上部参照。


//tabs04.js
//日本語 Tabs読み込み形式

(function($){

	$(function () {

		//最初に開く指定場所番号、最初は 0 になる
		var select_no=0;

		//--------------------------------------

		var fade_flag=false;
		var no=0;
		var keep_no=select_no;
		var tabmenu=$("#tab-menu");
		var tabsblock=$("#tabs-block");

		//content-load
		$(".tabs-line").each(function (i) {

			//外部ファイルの読み込み
			if ($(this).hasClass('load')) {
				var url=$(this).text();
				$(this).load(url,function (text,status) {
					//error
					if (status === 'error') {$(this).text("LOAD ERROR");}
				});
			}
			//内部コンテンツ取り込み
			if ($(this).hasClass('content')) {
				var id=$(this).text();
					//指定コンテンツがあれば
					if ($(id).length) {
						$(this).html($(id));
					} else {
						//なしerror
						$(this).text('NO-ID');
					}
			}

		});

		//指定場所のOPEN
		tabmenu.find("li").eq(select_no).addClass("active");
		$(".tabs-line").addClass("close").eq(select_no).addClass("open");

		//click-action
		tabmenu.find("li").click(function() {

			if (fade_flag) {return false;}
			no=tabmenu.find("li").index(this);
			if (no == keep_no) {return false;}

			tabmenu.find("li").removeClass("active");
			$(this).addClass("active");

			fade_flag=true;

			$(".tabs-line").removeClass("open").eq(no).addClass("open");

			keep_no=no;
			fade_flag=false;

		});

	});

})(jQuery);

JS名、クラス名など修正したい場合は、html js css 共に該当部分を修正ください。自由な名前で設定できます。


CSS

注意、画像コンテンツ部分に「外枠有り」( #tabs-block )。

tabs04.css


/* tabs04.css 日本語 */

/* tab-menu  */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

/* tabs-block */
#tabs-block {
display:block;
width:640px;
height:auto;
padding:0;
margin:0;
border-top:1px #CCCCCC solid;
border-bottom:1px #CCCCCC solid;
background-color:#FFFFFF;
overflow:hidden;
}

/* tabs-line */
#tabs-block .tabs-line {
display:block;
width:640px;
height:auto;
padding:0;
margin:0;
background-color:#FFFFFF;
}
#tabs-block .tabs-line.close {
display:none;
}
#tabs-block .tabs-line.open {
display:block;
}

サンプルですので、必要に応じて修正ください。



ページ内コンテンツ表示テスト

ページ内部のコンテンツを表示しています。

 

 

 

 

 

ID名を指定すれば表示します。コンテンツ幅などのCSSに注意が必要です。

 


ページ内FLASH-表示テスト

FLASH-表示テストです。ページ内の記述なら表示します。但し、別ページからのLoadでJS使用の場合は作動しないことがあります。


 

簡単な解説


1. innerクラスの場合は、以前の書き方と同じです。必要なhtmlを記述します。(innerクラス省略可)
2. 簡単にするために、ID名を記入すれば、ページ内のコンテンツを取り込みます。外部ファイルなどをload可能です。ページ内のコンテンツは移動するだけでJSなど機能します。
3. 外部ファイルは、JSなどの設定していない簡単なhtmlなどです。後で外部ファイルを読み込みますのでJSは機能しませんので注意ください。(外部ファイルは文字化けしますので、必ず「UTF-8N」で保存ください)
5. CSSはサンプルです。使用者のコンテンツ、ページの環境に合わせて修正します。(Tabsの方に移動した場合には、元々ある「ページのCSS」が機能しないこともあります)
6. JS先頭で画像の大きさ及び、最初に開く位置を指定ください。一番目は 0 になります。
7. ページ内のコンテンツを取り込みますと、Tabsの方に移動して、ページのコンテンツは表示されません。
8. 簡単なエラー処理をしていますが、閲覧者向けではなく、使用者への間違いを表示しているものです。正常に表示されない場合はファイル名、ID名を確認ください。


多少便利ですが、CSSの記載が大変になります。単に、このようにも出来ると言う「テストサンプル」です。


以上です。

 


[ この記事のURL ]


タグ:Tabs , series , memo , jquery

[ 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]