accordion（分类）组件
2019-09-24 23:01 小前端alical 阅读(671) 评论(0) 编辑 收藏 举报一、依赖于 Panel（面板）组件
二、class加载方式
<div id="box" class="easyui-accordion" style="width: 300px;height: 150px;">
<div title="标题一">内容区域1</div>
<div title="标题二">内容区域2</div>
<div title="标题三">内容区域3</div>
</div>
三、js加载方式
$(function () {
$("#box").accordion({
//属性
width:'500',//分类容器的宽度。默认值 auto。值为number
height:'auto',//分类容器的高度。默认值 auto。值为number
// fit:true,//分类容器大小将自适应父容器。默认值 false。值为boolean
//border:false,//定义是否显示边框。默认值 true。值为boolean
animate:true,//定义在展开和折叠的时候是否显示动画效 果。默认值 true。值为boolean
//multiple:true,//如果为 true时,同时展开多个面板。默认值 false。值为boolean
selected:2,//设置初始化时默认选中的面板索引号。默认值0。值为number
//事件
onSelect:function(title,index){
console.log(title+"---"+index)
},//在面板被选中的时候触发
unselect: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);//移除一个分类面板
})
