> Accordion依赖于Panel（面板）组件 # 加载方式 ## Class加载 ``` <div id="box" class="easyui-accordion" style="width:300px;height:200px;"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion2</div> <div title="accordion3">accordion3</div> </div> ``` ## JS调用加载 ``` $(function () { $('#box').accordion({ // 分类容器的宽度 weight : 200, // 分类容器的高度 height: 200, // 是否将分类容器大小将自适应父容器 fit : false, // 是否显示边框 border : true, // 在展开和折叠的时候是否显示动画效果 animate : true, // 是否同时展开多个面板 multiple : false, // 设置初始化时默认选中的面板索引号（从0开始） selected : 1 }) ; }); ``` # 容器属性列表 | 属性名 | 值 | 说明| | --- | --- | | width | number | 分类容器的宽度。默认值 auto。| | height | number | 分类容器的高度。默认值 auto。| | fit| boolean | 如果设置为 true，分类容器大小将自适应父容器。默认值 false。| | border | boolean 定义是否显示边框。默认值 true。| | animate | boolean | 定义在展开和折叠的时候是否显示动画效果。默认值 true。| | multiple | boolean | 如果为 true 时，同时展开多个面板。默认值 false。| | selected | number | 设置初始化时默认选中的面板索引号。默认值0。| # 事件列表 | 事件名 | 传参 | 说明| | --- | --- | | onSelect | title,index | 在面板被选中的时候触发。| | onUnselect | title,index | 在面板被取消选中的时候触发。| | onAdd | title,index | 在添加新面板的时候触发。| | onBeforeRemove | title,index | 在移除面板之前触发，返回 false 可以取消移除操作。| | onRemove | title,index | 在面板被移除的时候触发。| *** ``` $(function () { $('#box').accordion({ onSelect : function (title, index) { console.log(title + '|' + index); }, onUnselect : function (title, index) { console.log(title + '|' + index); }, onAdd : function (title, index) { console.log(title + '|' + index); }, onBeforeRemove : function (title, index) { console.log(title + '|' + index); // return false; }, onRemove : function (title, index) { console.log(title + '|' + index); } }) ; }); ``` # 方法列表 | 方法名 | 参数 | 说明| | --- | --- | | options| none | 返回分类组件的属性。| | panels | none | 获取所有面板。| | resize | none | 调整分类组件大小。| | getSelected | none | 获取选中的面板。| | getSelections | none | 获取所有选中的面板。| | getPanel | which | 获取指定的面板，'which'参数可以是面板的标题或者索引。| | getPanelIndex | panel | 获取指定面板的索引。| | select | which | 选择指定面板。'which'参数可以是面板标题或者索引。| | unselect | which | 取消选择指定面板。'which'参数可以是面板标题或者索引。| | add | options | 添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为 false。| | remove | which | 移除指定面板。'which'参数可以使面板的标题或者索引。| *** ``` //返回属性对象 console.log($('#box').accordion('options')); //返回所有分类面板 console.log($('#box').accordion('panels')); //调整分类面板布局和大小 $(document).click(function () { $('#box').accordion().css('display', 'block'); $('#box').accordion('resize'); }); //选择选中的分类面板 console.log($('#box').accordion('getSelected')); //选择所有选中的分类面板 console.log($('#box').accordion('getSelections')); //获取指定下标的分类面板 console.log($('#box').accordion('getPanel', 1)); //获取指定分类面板的下标值 console.log($('#box').accordion('getPanelIndex', '#a2')); //选中指定下标的分类面板 $('#box').accordion('select', 1); //取消选中指定下标的分类面板 $('#box').accordion('unselect', 0); //新增一个分类面板 $('#box').accordion('add', { title : '新分类', closable : true, content : '123', collapsible : false, selected : false, }); //移除一个分类面板 $('#box').accordion('remove', 0); // 可以使用$.fn.accordion.defaults 重写默认值对象。 $.fn.accordion.defaults.border = false; ``` # 面板属性 > 分类组件面板继承了 panel 属性，我们参考 panel 属性即可，对分类的面板同样有效。 并且提供了新增的两个属性。 | 属性名 | 参数 |说明| | --- | --- | | selected | boolean | 如果设置为 true 将展开面板。| | collapsible | boolean | 如果设置为 true 将显示折叠按钮。|