EasyUI中Accordion折叠面板的简单使用

野性酷女 2023-10-18 19:57 15阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190617232008721.gif][]

### 容器选项 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td>折叠面板（Accordion）容器的宽度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>折叠面板（Accordion）容器的高度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>fit</td> 
   <td>boolean</td> 
   <td>设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>boolean</td> 
   <td>定义是否显示边框。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>animate</td> 
   <td>boolean</td> 
   <td>定义当展开或折叠面板（panel）时是否显示动画效果。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>boolean</td> 
   <td>设置为 true，则可同时展开多个面板（panel）。该属性自版本 1.3.5 起可用。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>selected</td> 
   <td>number</td> 
   <td>初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。</td> 
   <td>0</td> 
  </tr> 
 </tbody> 
</table>

### 面板（Panel）选项 ###

折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>selected</td> 
   <td>boolean</td> 
   <td>设置为 true 就展开面板（panel）。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td>boolean</td> 
   <td>定义是否显示可折叠按钮。如果设置为 false，将不能通过点击来展开/折叠面板（panel）。</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>title,index</td> 
   <td>当面板（panel）被选中时触发。</td> 
  </tr> 
  <tr> 
   <td>onUnselect</td> 
   <td>title,index</td> 
   <td>当面板（panel）未被选中时触发。该事件自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>onAdd</td> 
   <td>title,index</td> 
   <td>当添加一个新面板（panel）时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeRemove</td> 
   <td>title,index</td> 
   <td>当移除一个面板（panel）之前触发，返回 false 就取消移除动作。</td> 
  </tr> 
  <tr> 
   <td>onRemove</td> 
   <td>title,index</td> 
   <td>当移除一个面板（panel）时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回折叠面板（accordion）的选项。</td> 
  </tr> 
  <tr> 
   <td>panels</td> 
   <td>none</td> 
   <td>获取全部的面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>none</td> 
   <td>调整折叠面板（accordion）的尺寸。</td> 
  </tr> 
  <tr> 
   <td>getSelected</td> 
   <td>none</td> 
   <td>获取第一个选中的面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>getSelections</td> 
   <td>none</td> 
   <td>过去所有选中的面板（panel）。该方法自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>getPanel</td> 
   <td>which</td> 
   <td>获取指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>getPanelIndex</td> 
   <td>panel</td> 
   <td>获取指定的面板（panel）索引。该方法自版本 1.3 起可用。<br> 下面的实例显示如何获取选中的面板（panel）索引。 <pre>&nbsp;</pre> 
    <ol> 
     <li>var p = $('#aa').accordion('getSelected');</li> 
     <li>if (p){ </li> 
     <li>var index = $('#aa').accordion('getPanelIndex', p);</li> 
     <li>alert(index);</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>which</td> 
   <td>选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>unselect</td> 
   <td>which</td> 
   <td>未选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>add</td> 
   <td>options</td> 
   <td>添加一个新的面板（panel）。默认情况下，新添加的面板（panel）会被选中。如需添加一个未被选中的新面板（panel），请传递 'selected' 属性，并将其设置为 false。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#aa').accordion('add', { </li> 
     <li>title: 'New Title',</li> 
     <li>content: 'New Content',</li> 
     <li>selected: false</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>remove</td> 
   <td>which</td> 
   <td>移除指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
            <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                面板1
            </div>
            <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                面板2
            </div>
            <div title="Title3">
                面板3
            </div>
        </div>
    </body>
    </html>

[Image 1]: 
[20190617232008721.gif]: https://img-blog.csdnimg.cn/20190617232008721.gif