I. Introduction:
Folding panel (Accordion) allows the use of multi-panel (panel), while one or more display panels (panel). Each panel (panel) has built-in support to expand and collapse. Click on the panel (Panel) to expand or collapse the head panel (Panel) body. Panel (Panel) content may be loaded by ajax designated 'href' attribute. User-definable selected panel (panel). If not specified, the default is selected the first panel (panel).
Second, use case
1. Create mode
easyui controls in general there are two ways to create ways: by way of labeling and js programming.
1.1 way to create a label:
As follows: add the parent container div class ID tag named "easyui-accordion", and to set its parameters attribute data-options. Each parent container div to a panel in the panel and can add some additional content, where each panel is added to achieve a tree control menu navigation. The tree control nodes can be added manually at the same time can also be obtained from the background by ajax way, the control function can be carried out in accordance with the authority of this idea.
<div id="left" data-options="region:'west',title:'导航菜单',split:true" style="width: 15%;">
<div id="left_content" class="easyui-accordion" data-options="fit:true">
<div title="基础数据">
<ul class="easyui-tree" data-options="lines: true">
<li>组织分解结构</li>
<Li<>Li</Post WBS>Li
> User Management </ Li >
</ UL >
</ div >
< div title = "Process Management" >
< UL class = "easyui-Tree" Data-Options = "Lines: to true" >
< Li > Process predefined < / Li >
< Li > process monitoring </ Li >
</ UL >
</ div >
< div title = "integrated management system" Data-Options = "Lines:true">
<ul class = "easyui-Tree" >
< Li > manually sync data </ Li >
< Li > Data synchronization log </ Li >
</ UL >
</ div >
< div title = "Rights Management" >
< UL class = " Tree-easyui " Data-Options =" Lines: to true " >
< Li > role management </ Li >
< Li > user right </ Li >
<li>
<span > Data Rights Management </ span >
< UL >
< Li > Data permissions associated configurations </ Li >
< Li > Data permissions batch processing </ Li >
</ UL >
</ Li >
</ UL >
</ div >
</ div >
</ div >
1.2 created programmatically
$("#left_content").accordion({...})
Renderings:
2, following the relevant attributes, described a method for recording
Container Properties
| Property name | Property Value Type | description | Defaults |
|---|---|---|---|
| width | number | Classification width of the container. | auto |
| height | number | Classification height of the container. | auto |
| fit | boolean | If set to true, the container size classification adaptive parent container. | false |
| border | boolean | Define whether border. | true |
| animate | boolean | 定义在展开和折叠的时候是否显示动画效果。 | true |
| multiple | boolean | 如果为true时，同时展开多个面板。（该属性自1.3.5版开始可用） | false |
| selected | number | 设置初始化时默认选中的面板索引号。（该属性自1.3.5版开始可用） | 0 |
面板属性
分类面板属性继承自panel(面板)，分类面板新增的属性如下：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| selected | boolean | 如果设置为true将展开面板。 | false |
| collapsible | boolean | 如果设置为true将显示折叠按钮。 | true |
事件
| 事件名 | 事件参数 | 描述 |
|---|---|---|
| onSelect | title,index | 在面板被选中的时候触发。 |
| onUnselect | title,index | 在面板被取消选中的时候触发。（该方法自1.3.5版开始可用） |
| onAdd | title,index | 在添加新面板的时候触发。 |
| onBeforeRemove | title,index | 在移除面板之前触发，返回false可以取消移除操作。 |
| onRemove | title,index | 在面板被移除的时候触发。 |
方法
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回分类组件的属性。 |
| panels | none | 获取所有面板。 |
| resize | none | 调整分类组件大小。 |
| getSelected | none | 获取选中的面板。 |
| getSelections | none | 获取所有选中的面板。（该方法自1.3.5版开始可用） |
| getPanel | which | 获取指定的面板，'which'参数可以是面板的标题或者索引。 |
| getPanelIndex | panel | 获取指定面板的索引。（该方法自1.3版开始可用） 以下示例显示如何获取选中面板的索引。 var p = $('#aa').accordion('getSelected');
if (p){
var index = $('#aa').accordion('getPanelIndex', p);
alert(index);
}
|
| select | which | 选择指定面板。'which'参数可以是面板标题或者索引。 |
| unselect | which | 取消选择指定面板。'which'参数可以是面板标题或者索引。（该方法自1.3.5版开始可用） |
| add | options | 添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为false。 代码示例： $('#aa').accordion('add', {
title: '新标题',
content: '新内容',
selected: false
});
|
| remove | which | 移除指定面板。'which'参数可以使面板的标题或者索引。 |