EasyUI创建折叠面板

折叠面板包含一系列的面板。所有面板的头部都是可见的，但是一次仅仅显示一个面板的 body 内容。当用户点击面板的头部时，该面板的 body 内容将可见，同时其他面板的 body 内容将隐藏不可见。

我们将创建三个面板，第三个面板包含一个树形菜单。

<div class="easyui-accordion"style="width:300px;height:200px;">	
<div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">		
<h3 style="color:#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>	<div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">		
easyui help you build your web page easily  	
</div>	<div title="Tree Menu">		
<ul id="tt1" class="easyui-tree">			
<li>				
<span>Folder1</span>				
<ul>			
<li>					
<span>Sub Folder 1</span>						
<ul>							
<li><span>File 11</span></li>							
<li><span>File 12</span></li>							
<li><span>File 13</span></li>						
</ul>					
</li>					
<li><span>File 2</span></li>					
<li><span>File 3</span></li>				
</ul>			
</li>			
<li><span>File2</span></li>	
</ul>  	
</div>   
</div>

创建折叠面板（Accordion）

通过标记创建折叠面板（Accordion），添加 'easyui-accordion' class 到 <div> 标记。

<div id="aa" class="easyui-accordion"style="width:300px;height:200px;">    
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">		
<h3 style="color:#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>    
<div title="Title2" data-options="iconCls:'icon-reload',selected:true"style="padding:10px;">		
content2    
</div>    
<div title="Title3">		  
content3    
</div>   
</div>

我们可以改变或重建折叠面板（Accordion）后，修改某些特性。

$('#aa').accordion({    
animate:false}  
);

刷新折叠面板（Accordion Panel）内容

调用 'getSelected' 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 'refresh' 方法来加载新内容。

var pp = $('#aa').accordion('getSelected'); 
// 获取选中的面板（panel）if (pp){    
pp.panel('refresh','new_content.php'); 
// 调用 'refresh' 方法加载新内容
}

容器选项

名称	类型	描述	默认值
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）。

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载