Menu

タブパネルプラグイン

Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。

Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。

プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。

JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。

Chapter13で作成したタブパネルを、オプション付きのプラグインにしています。パネルを表示する際のメソッドは、show、slideUp、fadeOutのいずれかをオプションで指定できます。

オプション
  • activeClass : アクティブな li要素に付けるクラス
  • effect : パネルを表示させるときのメソッド（デフォルト : show）
  • speed : アニメーションのスピード
  • wrapperClass : パネル部分に付けるクラス

最初から開いておきたいパネルは、li要素にアクティブなクラスを付けておきます。

jQuery Code

(function($){
	$.fn.jqueryTab = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* アクティブなli要素に付けるクラス */
			activeClass: "active",
			
			/* パネルを表示させるときのメソッド show,slideDown,fadeOut */
			effect: "show",
			
			/* アニメーションのスピード */
			speed: null,
			
			/* パネル部分に付けるクラス */
			wrapperClass: "panel"
			
		}, options);
			
			
		this.each(function(){
			var tab = this;
			var activePanelId = $('.' + options.activeClass + ' a', tab).attr("href");
			$( "." + options.wrapperClass + " > div:not(" + activePanelId + ")", tab).hide();
			$("> ul a", tab).click(function(){
				$("> ul li." + options.activeClass, tab).removeClass(options.activeClass);
				$("." + options.wrapperClass + " div", tab).hide();
				$(this).parent("li").addClass(options.activeClass);
			
				/* メソッドの書き方に注意 ... [メソッド]() */
				$($(this).attr("href"))[options.effect](options.speed);
				return false;
			});
		});
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$("#tab").jqueryTab({
		activeClass: "current",
		effect: "fadeIn",
		wrapperClass: "panel",
		speed: "200"
	});
});

Chapter 15