多くの場合、さまざまなサイトでアコーディオン制御オプションを確認する必要があります。 この記事では、独自のバージョンを提案したいと思います。オリジナルのプロパティに加えて、圧縮された形式では618バイトしかありません。 同時に、jQuery用の簡単なプラグインをすばやく作成する方法を示します。
今後、プラグインはFirefox 3.0.3、Internet Explorer 7および8b2、Opera 9.52、Chrome 0.3.154.9でテストされたと言います。 他のすべてのブラウザーでは、jQueryが機能する限りパフォーマンスが保証されます。
好奇心の強い人のために、最後に何が起こるか例を示します （例のリンクとボタンは機能しません）。
問題の声明
ボリュームが最小限のjQuery用のプラグインを作成します。これにより、html要素「dl」に基づいてアコーディオンコントロールが構築されます。 前提条件は、「アコーディオン」の非アクティブな要素の説明の結論です。 アコーディオンのアクティブな要素は、対応する要素dtのクラス「アクティブ」の存在によって決定されます。 dtには、アコーディオン要素のタイトルも含まれています。 span注釈要素には注釈のクラスが必要であり、ddにあります。 「アコーディオン」の各要素の本体はdivに含まれている必要があり、これもddにある必要があります。
解決策
最初に、dl要素の状態を更新し、それを目的の形式にする関数を定義します。
function Update(dl) {
$( "#" + dl.id + " > dt:not(.active)" ).each( function () {
$( this ).css( "cursor" , "pointer" );
});
$( "#" + dl.id + " > dt.active" ).each( function () {
$( this ).css( "cursor" , "" );
});
$( "#" + dl.id + " > dd > div" ).hide();
$( "#" + dl.id + " > dd > span.remark" ).show();
$( "#" + dl.id + " > dt.active" ).next().children( "div" ).show(300);
$( "#" + dl.id + " > dt.active" ).next().children( "span.remark" ).hide();
}
* This source code was highlighted with Source Code Highlighter .
最初の2つの操作は、「アコーディオン」のアクティブな要素と非アクティブな要素にカーソルを合わせると、マウスポインターの外観を更新します。 2番目の2つの操作は、「アコーディオン」の内容全体を非表示にし、すべてのノートを表示します。 3番目の2つの操作は、「アコーディオン」のアクティブなタブの内容を減速して表示し、そのメモを非表示にします。
次に、「アコーディオン」タブがクリックされたときに実行される機能を記述します。
$( "#" + this .id + " > dt" ).click( function () {
if ($( this ).hasClass( "active" ))
return ; // dt
$( "#" + dl.id + " > dt" ).removeClass( "active" );
$( this ).addClass( "active" );
Update(dl);
});
* This source code was highlighted with Source Code Highlighter .
これは「破壊された」コードです。 ここで、$（ "＃" + this.id + "> dt"）は、「アコーディオン」のすべてのタブの選択です。 jQueryを使用すると、タブをクリックするためのハンドラーがインストールされます。パッシブエレメントが終了した場合、最初にクリックした場所のチェックが行われます。 さらに、「acitve」クラスはすべてのタブから削除され、クリックされたクラスでは反対に割り当てられます。
すべてをまとめてjQueryプラグインを作成します。
jQuery.fn.accordion = function () {
function Update(dl) {
$( "#" + dl.id + " > dt:not(.active)" ).each( function () {
$( this ).css( "cursor" , "pointer" );
});
$( "#" + dl.id + " > dt.active" ).each( function () {
$( this ).css( "cursor" , "" );
});
$( "#" + dl.id + " > dd > div" ).hide();
$( "#" + dl.id + " > dd > span.remark" ).show();
$( "#" + dl.id + " > dt.active" ).next().children( "div" ).show(300);
$( "#" + dl.id + " > dt.active" ).next().children( "span.remark" ).hide();
}
return this .each( function () {
var dl = $( this )[0];
Update(dl);
$( "#" + this .id + " > dt" ).click( function () {
if ($( this ).hasClass( "active" ))
return ; // dt
$( "#" + dl.id + " > dt" ).removeClass( "active" );
$( this ).addClass( "active" );
Update(dl);
});
});
};
* This source code was highlighted with Source Code Highlighter .
jQueryを「アコーディオン」関数で拡張します。特定の要素ごとに、dlのインスタンスが取得され、受信したdlの状態が更新され、受信したdlのすべてのdtのマウスクリックハンドラーがインストールされます。
使用する
書かれたアイテムの使用は非常に簡単です。 これを行うには、コードに次のブロックを含めるだけです。これにより、渡されたdl要素から「アコーディオン」が作成されます。
< script type ="text/javascript" >
$( document ).ready
(
function () {
$( "#LoginList" ).accordion();
}
);
</ script >
* This source code was highlighted with Source Code Highlighter .
おわりに
提示されたオプションは最も単純なものであり、単なる一例にすぎません。 アクティブな要素の表示速度、タブ「アコーディオン」の開始番号に影響するパラメータを追加することで改善できます。 さらに、JavaScriptコード自体を改善できると確信しています。
上記の例とコントロールが誰かに役立つか、興味深いアイデアにつながることを願っています。
プラグインへのリンク（1192バイト）、 縮小バージョン （618バイト）。
UPD：DmitryBaranovskiy最適化のおかげで、縮小バージョンのサイズは508バイトに、完全バージョンは909バイトに縮小されました