POPSブログ

jQuery Tabs/4

186

  Category:  jquery2012/12/22 pops 

前ページ「Tabs 3」の効率化スクリプトを「フエード」出来るように追加改造してみました。構造機能などは同じになります。

 

簡単、単純なTabs 他の書き方、フエード形式

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


Tabs によるコンテンツ切り替え C (外枠なし、フエード形式)


Example D

ボタンを押しフエードが完全に終了するまで、次ぎのボタンは機能しません。


  • CONTENT1
  • CONTENT2
  • CONTENT3
  • CONTENT4

コンテンツ1


これはコンテンツ1の詳細文です。(上の画像は、陰影処理PNG画像です)


コンテンツ2

 

 

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

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


コンテンツ3

 

 

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

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

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


コンテンツ4

 

 

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

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

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

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



高さは固定でも可変でも、CSSで自由に出来る。コンテンツは使用者がHTMLで書き込む。
テスト表示のために「コンテンツ1」に透過陰影処理のPNG画像を挿入しています。(IE6以外OK)


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

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

フエード速度の切替 : 400 800 1200 :初期値 800


 

フエード形式、効率化JS


Tabメニューに対応したコンテンツを切り替え表示するだけですから、色々な書き方があると思いますので、一例です。
下記に、JSだけ掲載します。html CSSは同じです。各々のページを参照ください。


HTML CSS は下記ページのものと同じですので参照ください。

【参照】当方の記事(外枠有り): jQuery Tabs 1

【参照】当方の記事(外枠なし): jQuery Tabs 2


JS


● 「Tabs 2」の tabs01b.js を以下のよう書き換えれば良い。

注意、外枠の処理を行っていませんので、「外枠有り」「外枠なし」どちらでも使用可能です。


//tabs01b.js
//日本語、フエード表示

(function($){

	$(function () {

		//フエード速度
		var speed=800;
		//フエード中判定フラグ
		var fade_flag=false;

		//object
		var tabindex=$("#tab-index");
		//コンテンツ、一旦非表示、指定番号で表示
		$(".tabs-content").addClass("close").eq(0).addClass("open");

		//タブメニューclick-action
		tabindex.find("li").click(function() {

			//フエード中ならclickを受け付けない
			if (fade_flag) {return false;}

			//タブメニュー番号取得、CSS切り替え
			var number=tabindex.find("li").index(this);
			tabindex.find("li").removeClass("active");
			$(this).addClass("active");

			//一旦全てコンテンツを非表示にする
			$(".tabs-content").removeClass("open");

			//フエード開始、フエードフラグを設定
			fade_flag=true;
			//指定箇所をアニメ、delay時間あり
			$(".tabs-content").eq(number).css({'opacity':0}).addClass("open")
			.delay(200).animate({'opacity':1},speed,function(){
				//fade終了、フエードフラグを戻す
				fade_flag=false;
			});

		});

	});

})(jQuery);

このJSは「Tabs 1」の tabs01.jsでも使用できます。但し.tabs-contentクラスのCSS一部を変更する。
付属CSSは単なるサンプルですから、原則として、CSSは使用者が環境に応じ合わせること。


● 「Tabs 1」の tabs01.js を以下のよう書き換えれば良い。

注意、外枠有りの場合のJSです。外枠なしでは使用できません。


//tabs01.js
//日本語、フエード表示

(function($){

	$(function () {

		//フエード速度
		var speed=800;
		//フエード中判定フラグ
		var fade_flag=false;

		//object
		var tabindex=$("#tab-index");
		var tabsblock=$("#tabs-block");

		//コンテンツ、一旦非表示、指定番号で表示
		tabsblock.find(".tabs-content").addClass("close").eq(0).addClass("open");

		//タブメニューclick-action
		tabindex.find("li").click(function() {

			//フエード中ならclickを受け付けない
			if (fade_flag) {return false;}

			//タブメニュー番号取得、CSS切り替え
			var number=tabindex.find("li").index(this);
			tabindex.find("li").removeClass("active");
			$(this).addClass("active");

			//一旦全てコンテンツを非表示にする
			tabsblock.find(".tabs-content").removeClass("open");

			//フエード開始、フエードフラグを設定
			fade_flag=true;
			//指定箇所をアニメ、delay時間あり
			tabsblock.find(".tabs-content").eq(number).css({'opacity':0}).addClass("open")
			.delay(200).animate({'opacity':1},speed,function(){
				//fade終了、フエードフラグを戻す
				fade_flag=false;
			});

		});

	});

})(jQuery);

付属CSSは単なるサンプルですから、原則として、CSSは使用者が環境に応じ合わせること。
JS中の注釈文を削除すればまた少々実行速度が速くなります。


簡単な解説


1. 「フエード」(Fade-Inのみ)出来るように追加改造しただけですが、注意点としては、コンテンツの中にフエードでバグがでる要素を置かないようにしてください。(主にIE7.8.9でフィルター処理した、テキストまたは画像があると、フエード処理でアルファフィルターとのバグのために黒くなることが有ります、IE7.8.9の透過の仕組みが他のブラウザと違うのが原因です)
2. 透過陰影処理のPNG画像は、IE6以外は問題なくフエード表示出来るようです。(但し構造がサンプルと同じ場合、構造が違えばどうなるかは表示して見ないと判らない)
3. 普通のテキストを表示させるのが原則です。IE以外では問題がでることは希薄です。(CSS3以外でテキストに陰影処理するとブラウザによってはバグがでること有り)
4. ボタンを押して「フエード」が終了するまで、次ぎのボタンは機能しません。表示がキレイになるように遅延時間を取っています。
5. フエード速度をJS先頭で設定できます。(JS先頭部分参照)
6. CSSはサンプルです。使用者のコンテンツ、ページの環境に合わせて修正します。


フエード等のアニメとボタンの関係

アニメは比較的時間がかかりますが、「ボタン」は常に押せる状態にあるため、アニメが完全に終了する以前に押される事が多い。そのためにアニメの是正を行わねば成りませんが、アニメ中は「ボタン」が機能しないように処理したほうが簡単なのでそのようにしています。


次ぎの様に、「フエード中判定フラグ」fade_flag を利用して、アニメ処理直前に true にしておき、それで判定します。
アニメの停止stop()と修正処理は面倒ですので、click()アクション、 hover()アクションとアニメの組み合わせの時の是正処理に利用すると、以外と便利です。



--中略--

$(function () {

	//フエード中判定フラグ、名前は何でも良い
	var fade_flag=false;

	--中略--

	//タブメニューclickボタンが押された
	tabindex.find("li").click(function() {

		//フエード中ならclickを受け付けないで戻る、以後の処理を行わない
		if (fade_flag) {return false;}

		--中略--

		//フエード開始、フエードフラグを設定、アニメ中である
		fade_flag=true;

		//指定箇所をアニメ、delay時間あり
		$(".tabs-content").eq(number).css({'opacity':0}).addClass("open")
		.delay(200).animate({'opacity':1},speed,function(){

			//fade終了、フエードフラグを戻す、clickボタンを受け付ける状態
			fade_flag=false;

		});
	});
});


HTML CSS は下記ページのものと同じですので参照ください。

【参照】当方の記事(外枠有り): jQuery Tabs 1

【参照】当方の記事(外枠なし): jQuery Tabs 2


以上です。

 


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