jquery easyui Accordion的使用
来源：互联网 发布：淘宝头层牛皮除牛反绒 编辑：程序博客网 时间：2024/05/16 11:52
<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="width: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="width:200,height:200"> <div title="Title1" ></div> <div title="Title2" selected=true></div> </div> accordion的事件 onSelect：当一个可伸缩面板被选择时触发。 <div class="easyui-accordion" data-options="width:200,height:200,onSelect:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onAdd：在一个新面板被添加时触发。 <div class="easyui-accordion" data-options="width:200,height:200,onAdd:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onBeforeRemove：在可伸缩面板被移除之前触发，返回false将取消移除。 <div class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa"> <div title="Title1" ></div> <div title="Title2" ></div> </div> onRemove：在一个可伸缩面板被移除时触发。 <div class="easyui-accordion" data-options="width: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="width: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>
