jQuery EasyUI レイアウトプラグイン -Accordion アコーディオンパネル

jQuery EasyUI プラグイン

依存関係

• panel

使用法

アコーディオンパネル（Accordion）の作成

マークアップを使用してアコーディオンパネル（Accordion）を作成し、'easyui-accordion' クラスを <div> タグに追加します。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

アコーディオンパネル（Accordion）を変更または再構築した後、いくつかのプロパティを変更できます。

$('#aa').accordion({
    animate:false
});

アコーディオンパネル（Accordion Panel）の内容を更新する

'getSelected' メソッドを呼び出して現在のパネル（panel）を取得し、パネル（panel）の 'refresh' メソッドを呼び出して新しい内容を読み込むことができます。

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

コンテナオプション

パネル（Panel）オプション

アコーディオンパネル（Accordion）のパネル（panel）オプションはパネル（panel）から継承されます。以下は追加のプロパティです：

イベント

メソッド

var p = $('#aa').accordion('getSelected');
if (p){
    var index = $('#aa').accordion('getPanelIndex', p);
    alert(index);
}

$('#aa').accordion('add', {
    title: 'New Title',
    content: 'New Content',
    selected: false
});

jQuery EasyUI プラグイン