第二百零一节，jQuery EasyUI，Accordion(分类)组件
jQuery EasyUI，Accordion(分类)组件
学习要点：
1.加载方式
2.容器属性
3.事件列表
4.方法列表
5.面板属性
本节课重点了解 EasyUI 中 Accordion(选项卡)组件的使用方法，这个组件依赖于 Panel（面板）组件。
一．加载方式
class 加载方式
<div id="box" class="easyui-accordion" style="width:300px;height:200px;"> <div title="标题1">内容1</div> <div title="标题2">内容2</div> <div title="标题3">内容3</div> </div>
accordion()将一个符合规则的元素执行分类方法
JS 加载调用
$(function () { $('#box').accordion({ //... }); });
二．容器属性，也就是最外层区块
width number 分类容器的宽度。默认值 auto。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400 //分类容器的高度 }); });
height number 分类容器的高度。默认值 auto。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400 //分类容器的高度 }); });
fit boolean 如果设置为 true，分类容器大小将自适应父容器。默认值 false。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 fit:true //如果设置为 true，分类容器大小将自适应父容器。默认值 false。 }); });
border boolean 定义是否显示边框。默认值 true。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 border:false //定义是否显示边框。默认值 true。 }); });
animate boolean 定义在展开和折叠的时候是否显示动画效果。默认值 true。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 animate:false //定义在展开和折叠的时候是否显示动画效果。默认值 true。 }); });
multiple boolean 如果为 true 时，同时展开多个面板。默认值 false。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 multiple:true //如果为 true 时，同时展开多个面板。默认值 false。 }); });
selected number 设置初始化时默认选中的面板索引号。默认值0。默认展开
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1 //设置初始化时默认选中的面板索引号。默认值0。 }); });
三．事件列表
onSelect title,index 在面板被选中的时候触发。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1, //设置初始化时默认选中的面板索引号。默认值0。 onSelect:function (title,index) { alert('在面板被选中的时候触发。'); alert(title + '：' + '接收被选中的面板标题'); alert(index + '：' + '接收被选中的面板索引'); } }); });
onUnselect title,index 在面板被取消选中的时候触发。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1, //设置初始化时默认选中的面板索引号。默认值0。 onUnselect:function (title,index) { alert('在面板被取消选中的时候触发。'); alert(title + '：' + '接收被取消选中的面板标题'); alert(index + '：' + '接收被取消选中的面板索引'); } }); });
onAdd title,index 在添加新面板的时候触发。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1, //设置初始化时默认选中的面板索引号。默认值0。 onAdd:function (title,index) { alert('在添加新面板的时候触发。'); alert(title + '：' + '接收添加的面板标题'); alert(index + '：' + '接收添加的面板索引'); } }); $('#box').accordion('add', { title: '新分类', closable: true, content: '123', collapsible: false, selected: false }); });
onBeforeRemove title,index 在移除面板之前触发，返回 false 可以取消移除操作。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1, //设置初始化时默认选中的面板索引号。默认值0。 onBeforeRemove:function (title,index) { alert('在移除面板之前触发，返回 false 可以取消移除操作。'); alert(title + '：' + '接收移除的面板标题'); alert(index + '：' + '接收移除的面板索引'); } }); $('#box').accordion('remove', 0); });
onRemove title,index 在面板被移除后候触发。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1, //设置初始化时默认选中的面板索引号。默认值0。 onRemove:function (title,index) { alert('在面板被移除后候触发。'); alert(title + '：' + '接收移除的面板标题'); alert(index + '：' + '接收移除的面板索引'); } }); $('#box').accordion('remove', 1); });
四．方法列表
options none 返回分类组件的属性对象。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('options')); //返回分类组件的属性对象。 });
panels none 获取所有面板对象。
$(function () { $('#box').accordion({ width:500, //分类容器的宽度 height:400, //分类容器的高度 selected:1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('panels')); //获取所有面板对象 });
resize none 调整分类组件大小和布局。重要也就是分类变形后可以重置
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('resize'); //调整分类组件大小和布局。重要也就是分类变形后可以重置 });
getSelected none 获取选中的面板对象。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('getSelected')); // 获取选中的面板对象。 });
getSelections none 获取所有选中的面板对象。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('getSelections')); // 获取所有选中的面板。 });
getPanel which 获取指定的面板，'which'参数可以是面板的标题或者索引。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('getPanel',2)); // 获取指定的面板，'which'参数可以是面板的标题或者索引。 });
getPanelIndex panel 获取指定面板的索引。值是要获取的面板id
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); alert($('#box').accordion('getPanelIndex','#pox')); // 获取指定面板的索引。值是要获取的面板id });
select which 选择指定面板。'which'参数可以是面板标题或者索引。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('select',2); //选择指定面板。'which'参数可以是面板标题或者索引。 });
unselect which 取消选择指定面板。'which'参数可以是面板标题或者索引。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('unselect',1); //取消选择指定面板。'which'参数可以是面板标题或者索引。 });
add options添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为 false。添加一个分类面板
因为分类组件继承了Panel（面板）组件，新增面板属性可以用（面板）组件属性，其他属性见，五．面板属性
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('add', { title: '新分类', // closable: true, content: '123', // collapsible: false, // selected: false }); });
remove which 移除指定面板。'which'参数可以使面板的标题或者索引。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('remove',0); //移除指定面板。'which'参数可以使面板的标题或者索引。 });
$.fn.accordion.defaults 重写默认值对象。
$.fn.accordion.defaults.border = false;
五．面板属性
分类组件面板继承了 panel 属性，我们参考 panel 属性即可，对分类的面板同样有效。 并且提供了新增的两个属性。
selected boolean 如果设置为 true 将展开面板。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('add', { title: '新分类', content: '123', collapsible: true, //如果设置为 true 将显示折叠按钮。 selected: true //如果设置为 true 将展开面板。 }); });
collapsible boolean 如果设置为 true 将显示折叠按钮。
$(function () { $('#box').accordion({ width: 500, //分类容器的宽度 height: 400, //分类容器的高度 selected: 1 //设置初始化时默认选中的面板索引号。默认值0。 }); $('#box').accordion('add', { title: '新分类', content: '123', collapsible: true, //如果设置为 true 将显示折叠按钮。 selected: true //如果设置为 true 将展开面板。 }); });
