jquery easyui accordion



jQuery EasyUI可伸缩面板

使用$.fn.accordion.defaults重载默认值

依赖关系

• 控制面板

创建可伸缩面板

使用html标签创建可伸缩面板，只须要对<div>标签引用'easyui-accordion'类。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" 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" iconCls="icon-reload" selected="true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div>

在后面将介绍如何改变或者重建可伸缩面板以及修改一些特性。

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

刷新可伸缩面板的内容

调用'getSelected'方法获取当前面板（的名称），接着可以调用控制面板的'refresh'方法来载入新的内容。

var pp = $('#aa').accordion('getSelected'); //获取当前选择的可伸缩面板 if (pp){ pp.panel('refresh','new_content.php'); //调用'refresh'方法载入新内容 }

 

容器属性（可伸缩面板所在的容器，通常称为‘盒子’）

名称	类型	描述	默认值
width（宽度）	number（数字）	可伸缩面板所在容器的宽度。	auto
height（高度）	number（数字）	可伸缩面板所在容器的高度。	auto
fit（铺满浏览器）	boolean（布尔型）	如果设置为true，可伸缩面板所在容器将铺满它所在的父容器（浏览器）	false
border（边框）	boolean（布尔型）	定义是否显示边框。	true
animate（动画效果）	boolean（布尔型）	定义当延伸或者折叠面板时是否显示动画效果。	true

可伸缩面板属性

可伸缩面板继承控制面板的属性，以下是额外的属性:

名称	类型	描述	默认值
selected（被选择）	boolean（布尔型）	设置为true将默认展开面板。	false

事件

名称	参数	描述
onSelect	title	当一个可伸缩面板被选择时触发。
onAdd	title	在一个新面板被添加时触发。
onBeforeRemove	title	在可伸缩面板被移除之前触发，返回false将取消移除。
onRemove	title	在一个可伸缩面板被移除时触发。

方法

名称	参数	描述
options	none	返回容器属性对象。
panels	none	获取所有的面板。
resize	none	重置可伸缩面板。
getSelected	none	获取被选择的面板。
getPanel	title	获取特定的可伸缩面板。
select	title	选择特定的面板。
add	options	添加一个先的可伸缩面板。
remove	title	移除特定的面板。