您的位置：首页 > 产品设计 > UI/UE

EasyUI系列学习(十一)-Accordion(分类)

2016-02-22 21:39 721 查看

一、加载

1.class加载

<div class="easyui-accordion" style="width:300px;height:200px">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>

2.js加载

<div id="acdn" style="width:300px;height:200px">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({});
});
</script>

生成的代码

二、属性

<div id="acdn">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({
width: 300,
height: 200,
border: true,
//fit:true,
//animate:true,
//同时展开多个面板
multiple: true,
selected: 1
});
});
</script>

三、事件

<div id="acdn">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<script>
$(function () {
$("#acdn").accordion({
width: 300,
height: 200,
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 + "前");
},
onRemove: function (title, index) {
console.log(title + ":" + index + "后");
},
});
});
</script>

四、方法

五、新增属性

因为分类组件继承了panel属性，其具有selected和collapsible两个属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航