一、加载
1.class加载
<div class="easyui-accordion" style="300px;height:200px"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion2</div> <div title="accordion3">accordion3</div> </div>
<div id="acdn" style="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({ 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({ 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两个属性