<div id="accordionMenu" class="easyui-accordion" data-options="border:false,animate:true"> <div title="首页" style="overflow: hidden; border: none;"> <ul> <li class="li_selected_bgcolor"><a href="javascript:;" rel="${ctx}/myWorkflow/indexDeatilPage">首页</a></li> </ul> </div> <div title="用户管理" style="overflow: hidden; border: none;" > <ul> <shiro:hasPermission name="100010"> <li class=""><a href="javascript:;" rel="${ctx}/userManage/userList">用户管理</a></li> </shiro:hasPermission> </ul> </div <div title="系统管理" style="overflow: hidden; border: none"> <ul> <shiro:hasPermission name="900010"> <li class=""><a href="javascript:;" rel="${ctx}/adminManage/adminList">后台管理员添加/管理</a></li> </shiro:hasPermission> </ul> </div> </div>
删除菜单
$("#accordionMenu").accordion('remove',element.text);
element.text : 菜单目录
如:
EasyUI Accordion 折叠面板
通过 $.fn.accordion.defaults 重写默认的 defaults。
折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel)。每个面板(panel)都有展开和折叠的内建支持。点击面板(panel)头部可展开或折叠面板(panel)主体。面板(panel)内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板(panel)。如果为指定,则默认选中第一个面板(panel)。
依赖
- panel
用法
创建折叠面板(Accordion)
通过标记创建折叠面板(Accordion),添加 'easyui-accordion' class 到 <div> 标记。
- <div id="aa" class"easyui-accordion" style"width:300px;height200px;">
- title"Title1" data-options"iconCls:'icon-save'"overflow:autopadding10px>
- <h3color:#0099FF;>Accordion for jQuery</h3>
- <p>Accordion is a part of easyui framework for jQuery.
- It lets you define your accordion component on web page more easily.</p>
- </div>
- "Title2""iconCls:'icon-reload',selected:true">
- content2
- </div>
- "Title3">
- content3
- </div>
- </div>
我们可以改变或重建折叠面板(Accordion)后,修改某些特性。
).accordion({
刷新折叠面板(Accordion Panel)内容
调用 'getSelected' 方法来获取当前面板(panel),然后我们可以调用面板(panel)的 'refresh' 方法来加载新内容。
); // 获取选中的面板(panel)
容器选项
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 折叠面板(Accordion)容器的宽度。 | auto |
height | number | 折叠面板(Accordion)容器的高度。 | auto |
fit | boolean | 设置为 true,就使折叠面板(Accordion)容器的尺寸适应它的父容器。 | false |
border | boolean | 定义是否显示边框。 | true |
animate | 定义当展开或折叠面板(panel)时是否显示动画效果。 | true | |
multiple | 设置为 true,则可同时展开多个面板(panel)。该属性自版本 1.3.5 起可用。 | false | |
selected | 初始化选中的面板(panel)索引。该属性自版本 1.3.5 起可用。 | 0 |
面板(Panel)选项
折叠面板(Accordion)的面板(panel)选项继承自面板(panel),下面是附加的属性:
事件
方法
getPanelIndex
panel
获取指定的面板(panel)索引。该方法自版本 1.3 起可用。
下面的实例显示如何获取选中的面板(panel)索引。
select
选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。
unselect
which
未选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。该方法自版本 1.3.5 起可用。
add
options
添加一个新的面板(panel)。默认情况下,新添加的面板(panel)会被选中。如需添加一个未被选中的新面板(panel),请传递 'selected' 属性,并将其设置为 false。
代码实例: title: 'New Title' content'New Content' selectedfalse
});
remove
移除指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。
下面的实例显示如何获取选中的面板(panel)索引。
- p );
- p){
- index 'getPanelIndex' p);
- alertindex);
- }
代码实例:
{