jQuery EasyUI API 中文文檔 - Panel面板

更新時(shí)間：2011年09月30日 01:26:35 作者：

jQuery EasyUI API 中文文檔 - Panel面板，使用jQuery EasyUI的朋友可以參考下。

用$.fn.panel.defaults重寫defaults。
用法示例
創(chuàng)建Panel
1. 經(jīng)由標(biāo)記創(chuàng)建Panel
從標(biāo)記創(chuàng)建Panel更容易。把 'easyui-panel' 類添加到<div/>標(biāo)記。

復(fù)制代碼代碼如下:

 
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 
iconCls="icon-save" closable="true" 
collapsible="true" minimizable="true" maximizable=true> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 

2. 編程創(chuàng)建Panel
讓我們創(chuàng)建帶右上角工具欄的Panel。.

復(fù)制代碼代碼如下:

 
<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save' 
handler:function(){alert('save')} 
}] 
}); 

移動Panel
調(diào)用 'move' 方法把Panel移動到新位置。

復(fù)制代碼代碼如下:

 
$('#p').panel('move',{ 
left:100, 
top:100 
}); 

加載內(nèi)容
讓我們經(jīng)由ajax加載panel內(nèi)容并且當(dāng)加載成功時(shí)顯示一些信息。

復(fù)制代碼代碼如下:

 
$('#p').panel({ 
href:'content_url.php', 
onLoad:function(){ 
alert('loaded successfully'); 
} 
}); 

特性

名稱	類型	說明	默認(rèn)值
title	string	顯示在Panel頭部的標(biāo)題文字。	null
iconCls	string	在Panel里顯示一個16x16圖標(biāo)的CSS類。	null
width	number	設(shè)置Panel的寬度。	auto
height	number	設(shè)置Panel的高度。	auto
left	number	設(shè)置Panel的左邊位置。	null
top	number	設(shè)置Panel的頂部位置。	null
cls	string	給Panel增加一個CSS類。	null
headerCls	string	給Panel頭部增加一個CSS類。	null
bodyCls	string	給Panel身體增加一個CSS類。	null
style	object	給Panel增加自定義格式的樣式。	{}
fit	boolean	當(dāng)設(shè)為true時(shí)，Panel的尺寸就適應(yīng)它的父容器。	false
border	boolean	定義了是否顯示Panel的邊框。	true
doSize	boolean	設(shè)置為true，創(chuàng)建時(shí)Panel就調(diào)整尺寸并做成布局。	true
noheader	boolean	要是設(shè)置為true，Panel的頭部將不會被創(chuàng)建。	false
content	string	Panel身體的內(nèi)容。	null
collapsible	boolean	定義了是否顯示折疊按鈕。	false
minimizable	boolean	定義了是否顯示最小化按鈕。	false
maximizable	boolean	定義了是否顯示最大化按鈕。	false
closable	boolean	定義了是否顯示關(guān)閉按鈕。	false
tools	array	自定義工具組，每個工具包含兩個特性： iconCls和handler	[]
collapsed	boolean	定義了初始化Panel是不是折疊的。	false
minimized	boolean	定義了初始化Panel是不是最小化的。	false
maximized	boolean	定義了初始化Panel是不是最大化的。	false
closed	boolean	定義了初始化Panel是不是關(guān)閉的。	false
href	string	一個URL，用它加載遠(yuǎn)程數(shù)據(jù)并且顯示在Panel里。	null
cache	boolean	設(shè)置為true就緩存從href加載的Panel內(nèi)容。	true
loadingMessage	string	當(dāng)加載遠(yuǎn)程數(shù)據(jù)時(shí)在Panel里顯示的一條信息。	Loading…
extractor	function	定義了如何從ajax響應(yīng)抽出內(nèi)容，返回抽出的數(shù)據(jù)。 extractor: function(data){ var pattern = /<body[^>]>((.\|[\n\r]))<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // 只抽出 body 的內(nèi)容 } else { return data; } }

事件

名稱	參數(shù)	說明
onLoad	none	當(dāng)遠(yuǎn)程數(shù)據(jù)被加載時(shí)觸發(fā)。
onBeforeOpen	none	Panel打開前觸發(fā)，返回false就停止打開。
onOpen	none	Panel打開后觸發(fā)。
onBeforeClose	none	Panel關(guān)閉前觸發(fā)，返回false就取消關(guān)閉。
onClose	none	Panel關(guān)閉后觸發(fā)。
onBeforeDestroy	none	Panel銷毀前觸發(fā)，返回false就取消銷毀。
onDestroy	none	Panel銷毀后觸發(fā)。
onBeforeCollapse	none	Panel折疊前觸發(fā)，返回false就停止折疊。
onCollapse	none	Panel折疊后觸發(fā)。
onBeforeExpand	none	Panel展開前觸發(fā)，返回false就停止展開。
onExpand	none	Panel展開后觸發(fā)。
onResize	width, height	Panel調(diào)整尺寸后觸發(fā)。 width：新的外部寬度。 height：新的外部高度
onMove	left,top	Panel移動后觸發(fā)。 left：新的左邊位置 Top：新的頂部位置
onMaximize	none	窗口最大化后觸發(fā)。
onRestore	none	窗口還原為它的原始尺寸后觸發(fā)。
onMinimize	none	窗口最小化后觸發(fā)。

方法

名稱	參數(shù)	說明
options	none	返回選項(xiàng)特性。
panel	none	返回Panel對象。
header	none	返回Panel頭部對象。
body	none	返回Panel身體對象。
setTitle	title	設(shè)置頭部的標(biāo)題文字。
open	forceOpen	當(dāng)forceOpen參數(shù)設(shè)為true，就繞過onBeforeOpen回調(diào)函數(shù)打開Panel。
close	forceClose	當(dāng)forceClose參數(shù)設(shè)為true，就繞過onBeforeClose回調(diào)函數(shù)關(guān)閉Panel。
destroy	forceDestroy	當(dāng)forceDestroy參數(shù)設(shè)為true，就繞過onBeforeDestroy回調(diào)函數(shù)銷毀Panel。
refresh	href	當(dāng)設(shè)置了href特性時(shí)，刷新Panel加載遠(yuǎn)程數(shù)據(jù)。
resize	options	設(shè)置Panel尺寸并做布局。Options對象包含下列特性： width：新的Panel寬度 height：新的Panel高度 left：新的Panel左邊位置 top：新的Panel頂部位置
move	options	移動Panel到新位置。Options對象包含下列特性： left：新的Panel左邊位置 top：新的Panel頂部位置
maximize	none	Panel適應(yīng)它的容器的尺寸。
minimize	none	最小化Panel。
restore	none	把最大化的Panel還原為它原來的尺寸和位置。
collapse	animate	折疊Panel身體。
expand	animate	展開Panel身體。