Accordion( 分类) 组件

一． 加载方式

//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 加载调用
$('#box').accordion({
//...
});

 

二．容器属性

//属性设置
$('#box').accordion({
width : 500,
height : 500,
fit : true,
border : false,
animate : false,
multiple : true,
selected : 1,
});

 

三．事件列表

$('#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);
},

});

 

四．方法列表

//返回属性对象
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);

PS：我们可以使用$.fn.accordion.defaults 重写默认值对象。
$.fn.accordion.defaults.border = false;

 

五．面板属性

分类组件面板继承了 panel 属性， 我们参考 panel 属性即可， 对分类的面板同样有效。
并且提供了新增的两个属性。