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

通过 $.fn.accordion.defaults 重写默认的 defaults。

折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板（panel）。如果为指定，则默认选中第一个面板（panel）。

依赖

• panel

用法

创建折叠面板（Accordion）

通过标记创建折叠面板（Accordion），添加 'easyui-accordion' class 到 <div> 标记。

<div id="aa">
    <div title="Title1" data-options="iconCls:'icon-save'">
        <h3>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">
        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
});