Menu

アコーディオンプラグイン - dlバージョン

HTML
Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
CSS
Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
JavaScript
プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
jQuery
JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。

Chapter10で作成したアコーディオンをプラグイン化しています。また、複数のオプションも付けています。プラグインのコードは、他のJavaScriptライブラリとのコンフリクトを避けるため、カプセル化しています。

オプション
  • speed : アニメーションのスピード
  • activeClass : アクティブな dt要素に付けるクラス
  • hoverClass : dt要素にマウスを乗せたときに付けるクラス
  • iconClass : アイコンとなる span要素に付けるクラス

Chapter10 では、一番上のパネルがデフォルトで開いていましたが、アクティブなクラスをマークアップすることで、最初に開いておくパネルを任意に選べます。サンプルでは 3番目のパネルがアクセス時には開いています。

jQuery Code

(function($){ /* プラグイン全体をカプセル化 */
	$.fn.jqueryDlAccordion = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* アニメーションのスピード */
			speed: "fast",
			
			/* アクティブな dt要素に付けるクラス */
			activeClass: "active",
			
			/* dt要素にマウスを乗せたときに付けるクラス */
			hoverClass: "hover",
			
			/* アイコンとなる span要素に付けるクラス */
			iconClass: "icon"
			
		}, options);
			
			
		this.each(function(){
			
			/* this を変数化 */
			var accordion = this;
			
			/* アクティブなdtに隣接するdd以外のddを非表示に */
			$('> dd:not(".' + options.activeClass + ' + dd")', accordion).hide();
			
			/* dtにアイコンとなるspanを挿入 */
			$("> dt", accordion).prepend('<span class="' + options.iconClass + '"></span>')
			
			/* マウスの乗せたときのクラスを操作 */
			.hover(function(){
				$(this).addClass(options.hoverClass);
			}, function(){
				$(this).removeClass(options.hoverClass);
			})
			
			.click(function(){
					if( $("+ dd", this).css("display") == "none" ){
			
					/* 全てのddを閉じる */
					$("> dd", accordion).slideUp(options.speed);
			
					/* dtからアクティブなクラスを削除 */
					$("> dt." + options.activeClass, accordion).removeClass(options.activeClass);
			
					/* クリックされたdtにアクティブなクラスを付ける */
					$(this).addClass(options.activeClass)
			
					/* クリックされたdtの次のddを開く */
					.next("dd").slideDown(options.speed);
				}
			});
		});
			
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$("#accordion").jqueryDlAccordion({
			
		/* アニメーションのスピードを200に設定 */
		speed: 200
	});
});

Chapter 15