jQuery EasyUI 布局插件 – Accordion 折叠面板

jQuery EasyUI 布局插件 - Accordion 折叠面板

依赖

• panel

用法

创建折叠面板（Accordion）

通过标记创建折叠面板（Accordion），添加 'easyui-accordion' class 到 <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
});