jQuery EasyUI 布局插件 – Accordion 折疊面板

jQuery EasyUI 布局插件 - Accordion 折疊面板

jQuery EasyUI 插件

依賴

• panel

用法

創(chuàng)建折疊面板（Accordion）

通過(guò)標(biāo)記創(chuàng)建折疊面板（Accordion），添加 'easyui-accordion' class 到 <div> 標(biāo)記。

<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）內(nèi)容

調(diào)用 'getSelected' 方法來(lái)獲取當(dāng)前面板（panel），然后我們可以調(diào)用面板（panel）的 'refresh' 方法來(lái)加載新內(nèi)容。

var pp = $('#aa').accordion('getSelected'); // 獲取選中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 調(diào)用 'refresh' 方法加載新內(nèi)容
}

容器選項(xiàng)

面板（Panel）選項(xiàng)

折疊面板（Accordion）的面板（panel）選項(xiàng)繼承自面板（panel），下面是附加的屬性：

事件

方法

var p = $('#aa').accordion('getSelected');
if (p){
	var index = $('#aa').accordion('getPanelIndex', p);
	alert(index);
}

$('#aa').accordion('add', {
	title: 'New Title',
	content: 'New Content',
	selected: false
});

jQuery EasyUI 插件