场景

效果

容器选项

名称	类型	描述	默认值
width	number	折叠面板（Accordion）容器的宽度。	auto
height	number	折叠面板（Accordion）容器的高度。	auto
fit	boolean	设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。	false
border	boolean	定义是否显示边框。	true
animate	boolean	定义当展开或折叠面板（panel）时是否显示动画效果。	true
multiple	boolean	设置为 true，则可同时展开多个面板（panel）。该属性自版本 1.3.5 起可用。	false
selected	number	初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。	0

面板（Panel）选项

折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：

名称	类型	描述	默认值
selected	boolean	设置为 true 就展开面板（panel）。	false
collapsible	boolean	定义是否显示可折叠按钮。如果设置为 false，将不能通过点击来展开/折叠面板（panel）。	true

事件

名称	参数	描述
onSelect	title,index	当面板（panel）被选中时触发。
onUnselect	title,index	当面板（panel）未被选中时触发。该事件自版本 1.3.5 起可用。
onAdd	title,index	当添加一个新面板（panel）时触发。
onBeforeRemove	title,index	当移除一个面板（panel）之前触发，返回 false 就取消移除动作。
onRemove	title,index	当移除一个面板（panel）时触发。

方法

名称	参数	描述
options	none	返回折叠面板（accordion）的选项。
panels	none	获取全部的面板（panel）。
resize	none	调整折叠面板（accordion）的尺寸。
getSelected	none	获取第一个选中的面板（panel）。
getSelections	none	过去所有选中的面板（panel）。该方法自版本 1.3.5 起可用。
getPanel	which	获取指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
getPanelIndex	panel	获取指定的面板（panel）索引。该方法自版本 1.3 起可用。下面的实例显示如何获取选中的面板（panel）索引。 var p = $('#aa').accordion('getSelected'); if (p){ var index = $('#aa').accordion('getPanelIndex', p); alert(index); }
select	which	选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
unselect	which	未选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
add	options	添加一个新的面板（panel）。默认情况下，新添加的面板（panel）会被选中。如需添加一个未被选中的新面板（panel），请传递 'selected' 属性，并将其设置为 false。代码实例： $('#aa').accordion('add', { title: 'New Title', content: 'New Content', selected: false });
remove	which	移除指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。

实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body><div id="aa" class="easyui-accordion" style="width:300px;height:200px;"><div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">面板1</div><div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">面板2</div><div title="Title3">面板3</div></div>
</body>
</html>

EasyUI中Accordion折叠面板的简单使用相关推荐

html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
EasyUI Accordion折叠面板
EasyUI Accordion折叠面板 Accordion介绍效果图依赖于panel 用法刷新折叠面板(Accordion Panel)内容新添加面板获取指定的面板(panel)索引容器 ...
html easyui怎么实现折叠面板,Easyui Accordion 折叠面板_EasyUI 插件
通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel).每个面板(p ...
Jquery Accordion 折叠面板
属性类型默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
ajaxToolKit中的折叠面板用法--Accordion
1)在web.config 的<controls>中增中<add namespace="AjaxControlToolkit" assembly="Aj ...
EasyUI中Datagride数据网格的简单使用
场景效果数据网格(DataGrid)属性该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性. 名称类型描述默认值 columns array 数据网格(data ...
EasyUI中Combox组合框的简单使用
场景效果用法从带有预定义结构的 <select> 元素创建组合框(combobox). <select id="cc" class="easyui ...
EasyUI中Datebox日期框的简单使用
场景效果属性该属性扩展自组合(combo),下面是为日期框(datebox)添加的属性. 名称类型描述默认值 panelWidth number 下拉日历面板的宽度. 180 panelH ...
EasyUI中Messager消息框的简单使用
场景效果属性名称类型描述默认值 ok string 确定按钮的文本. Ok cancel string 取消按钮的文本. Cancel 方法名称参数描述 $.messager.sho ...

EasyUI中Accordion折叠面板的简单使用

场景

效果

容器选项

面板（Panel）选项

事件

方法

实现

EasyUI中Accordion折叠面板的简单使用相关推荐

最新文章

热门文章