POPSブログ

jQuery Tabs/3

185

  Category:  jquery2012/12/21 pops 

前ページ「Tabs 1」「Tabs 2」のスクリプトを siblings() を使用せず、効率化したJSです。機能などは同じになります。

 

簡単、単純なTabs 他の書き方

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


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


Example C


  • 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


 

効率化したJS


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


JS


● 「Tabs 2」の tabs01b.js 以下のように書いても同じである


//tabs01b.js

(function($){

	$(function () {

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

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

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

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

			//一旦全てコンテンツを非表示にする 指定コンテンツ箇所を表示する
			$(".tabs-content").removeClass("open").eq(number).addClass("open");

		});
	});

})(jQuery);


● 「Tabs 1」の tabs01.js 以下のように書いても同じである


//tabs01.js

(function($){

	$(function () {

		//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() {

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

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

		});

	});

})(jQuery);


簡単な解説


1. idの有る要素を繰り返し参照する場合は、「jqueryオブジェクト」を保存して使用すれば効率的。
2. チェーンメソッドに出来るところは連結する。(jqueryオブジェクトを返すのを利用)
3. idセレクタが先頭にある複合セレクタは、最初idを取得してからフィルタさせると早くなるらしい。
例、$("#tabs-block .tabs-content")....は、$("#tabs-block").find(".tabs-content").....、となる。
IEでは結構速くなるみたいだ!。下記、参考記事参照。


私見として

私としては、明らかに速くせねばならない箇所は、多少「効率化」するが全てを効率的に書いてはいない。「何の処理をするか」「処理の順序は」「判り易さ」に重点を置き「非効率的」な部分もある。必要に迫られた時に必要な箇所を書き換えれば良いと思っている。
オリジナルのアニメ処理などの場合は、チェーンメソッドが必ずしも有効とは限らない事もある。一種の駆け引きが必要。



● idセレクタが先頭にある複合セレクタの効率化に関する参考記事。

【参考】バシャログ記事: [PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった


前ページJSとの違いを比較ください。

【参照】当方の記事: 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]