アコーディオンプラグイン - 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
});
});