jQueryの折りたたみpanel_jqueryの詳細な分析-jsチュートリアル-php.cn

1: 折りたたみパネルは、異なるカテゴリのコンテンツを異なるパネル に配置できます。これらのパネルはページ上に積み重ねられており、ユーザーは各パネルのタイトルをクリックして展開できます。、パネルのコンテンツを表示します。
同時に、他のパネルが自動的に折りたたまれて非表示になります
$(selector).accordion(options);
options選択できます。プロパティは次のとおりです:
disabled、active、animated、autoHeight、clearStyle、cololapsible、event、fillSpace、header、icons、navigation、navigationFilter
簡単な例:

コードをコピーコードは次のとおりです:

标题 1

这是一段内容＆＆lt; br/＆gt;
＆lt;/div＆gt;
＆lt; h3＆gt;＆lt; a href = "＃"＆gt; >

これは段落の内容です

程序效果图：

3: 能自制排列顺序の折板面
折面板は分別目的のメインパネルとして使用できます、操作上の理由から、ユーザーは通常希望可能です独自の面板の位置

复制代码代码如下:

AccordionSortable

< ;script type="text/javascript" src="JS/jquery.ui.core.js">

< script type="text/javascript" src="JS/jquery.ui.sortable.js">

标题 1

これは部分的な内容です

标题 2

これは段階的な内容です

& lt;/div>

标题 3

これは段落の内容です

< /body>

4：折叠面板の方法
破壊、無効化、有効化、オプション、ウィジェット、アクティブ化、サイズ変更
$('#accordion').accordion("activate", 2);

复制代码

代码如下:

アコーディオンのサイズ変更

< ;script>
$(document).ready(function(){
$( "#accordion" ).accordion({
fillSpace : true /* 设置用自动充父元素空间 */
});

/* コンテナはサイズ変更可能に設定されます、
最小高さは 150、
并、サイズ変更時に折りたたみパネルのサイズ変更方法を使用します */
$ ( "#container" ).resizable({
minHeight : 150,
resize : function() {
$( "#accordion" ).accordion( "resize" );
}
});
});

标题 1

これは第 1 段目の内容です< ;br />

列表 1
列表 2</li>
列表 3

标题 2

これは第 2 段階の内容です
これは第 2 段階の内容です

これは第三段内容です
これは第三段内容です
これは第三段内容ですセグメント内容

これはもう 1 つのモジュールであり、折り曲げ面パネルのサイズに応じて位置を変更します

< ;/html>

レンダリング:

上記のコードは、最初に、親要素を自動的に埋めることができるコンポーネントとして折りたたみパネルを初期化し、次にコンテナーを自動的にサイズ変更するように設定し、サイズが変更されたときにそれを呼び出します。コンテナコントロールの変更のサイズ変更メソッド
は、最終的に一緒にサイズ変更する効果を実現します
5: 折りたたみパネルのイベント
変更そして、changestart events

コードをコピーしますコードは次のとおりです:

 $("#accordion" ).accordion({
 change: function(event, ui) {
 },
 changestart: function(event, ui) {
 }
 })

*event: トリガーされたイベントオブジェクト
*ui: ビューオブジェクトには、現在のパネルのタイトルを表す newHeader、前のパネルのタイトルを表す oldHeader という 4 つの属性があります。 newContent: 現在のパネルのコンテンツを表します。oldContent: 前のパネルのコンテンツを表します。
これらは jQuery オブジェクトを返します

jQueryの折りたたみpanel_jqueryの詳細な分析

标题 1

标题 1 これは部分的な内容です

标题 3

标题 1

标题 2

标题 1

これは部分的な内容です