<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>
jquery easyui Accordion的使用
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:前端 自适应布局
下一篇:天乙社区用户列表显示分析

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
jQuery easyUI--accordion折叠面板
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>accordion折叠面板</title> <script type="text/javascript" src=
accordion折叠面板 html javascript jquery -
easyUI之Accordion(分类)
Accordion(分类) 北京 ...
ico css html javascript jquery -
EasyUI中Accordion折叠面板的简单使用
场景效果容器选项名称 类型 描述 默认值 width。...
accordion ico css html -
【EasyUI篇】Accordion分类组件
微信公众号:程序yuan关注可了解更多的教程。问题或建议,请公众号留言;查看--> 全套EasyUI示例目录
EeayUI Accordion css javascript html -
easyuijquery整合 easyui-accordion
从图中我们其实也可以将这种组件理解为手风琴式的组件。 该组件方便对数据进行分类管理,在有限空间内放置最多的内容。
easyuijquery整合 ico sed Layout