<html> <head> <script src="jquery-easyui/jquery.min.js"></script> <script src="jquery-easyui/jquery.easyui.min.js"></script> <script src="jquery-easyui/easyloader.js"></script> <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" /> </head> <body> <!-- accordion的属性 width:可伸缩面板所在容器的宽度 <div class="easyui-accordion" data-options="200"> <div title="Title1" ></div> </div> height:可伸缩面板所在容器的高度 <div class="easyui-accordion" data-options="height:200"> <div title="Title1" ></div> </div> fit:铺满整个屏幕 <div class="easyui-accordion" data-options="fit:true"> <div title="Title1" ></div> </div> border:为false时不显示边框,相反则显示,默认是true <div class="easyui-accordion" data-options="border:true"> <div title="Title1" ></div> </div> animate:为false时没有折叠的动画效果,相反有动画效果,默认是true <div class="easyui-accordion" data-options="animate:true"> <div title="Title1" ></div> </div> 可伸缩面板属性 selected:为true时,默认展开这个面板,相反是第一个默认展开,默认是false <div class="easyui-accordion" data-options="200,height:200"> <div title="Title1" ></div> <div title="Title2" selected=true></div> </div> accordion的事件 onSelect:当一个可伸缩面板被选择时触发。 <div class="easyui-accordion" data-options="200,height:200,onSelect:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onAdd:在一个新面板被添加时触发。 <div class="easyui-accordion" data-options="200,height:200,onAdd:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onBeforeRemove:在可伸缩面板被移除之前触发,返回false将取消移除。 <div class="easyui-accordion" data-options="200,height:200,onBeforeRemove:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onRemove:在一个可伸缩面板被移除时触发。 <div class="easyui-accordion" data-options="200,height:200,onRemove:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> accordion的方法 options:返回容器属性对象。 panels:获取所有的面板。 resize:重置可伸缩面板。 getSelected:获取被选择的面板。 getPanel:获取特定的可伸缩面板。 select:选择特定的面板。 add:添加一个先的可伸缩面板。 remove:移除特定的面板。 --> <div id="p" class="easyui-accordion" data-options="200,height:200,onBeforeRemove:aa"> <div title="Title1" icon="icon-sys"></div> <div title="Title2" ></div> <div title="Title3" ></div> <div title="Title4" ></div> </div> <input type="button" id="tian" value="添加"> <input type="button" id="yi" value="移除"> <script> function aa(){ alert('123'); } //方法的使用 $(function (){ $("#tian").click(function (){ $("#p").accordion('add',{ title:"Title1" }) }) $("#yi").click(function (){ $("#p").accordion('remove','Title1'); }) }) </script> </body> </html>