jQuery EasyUI API 中文文檔 - 面板（Panel）

Panel 面板

用$.fn.panel.defaults重寫defaults。

用法示例

創建Panel

1. 經由標記創建Panel

從標記創建Panel更容易。把 'easyui-panel' 類添加到<div/>標記。

1. <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"

2. iconCls="icon-save" closable="true"

3. collapsible="true" minimizable="true" maximizable=true>

4. <p>panel content.</p>

5. <p>panel content.</p>

6. </div>

2. 編程創建Panel

讓我們創建帶右上角工具欄的Panel。.

1. <div id="p" style="padding:10px;">  

2.     <p>panel content.</p>  

3.     <p>panel content.</p>  

4. </div>  

5.

6. $('#p').panel({  

7.   width:500,  

8.   height:150,  

9.   title: 'My Panel',  

10.   tools: [{  

11.     iconCls:'icon-add',  

12.     handler:function(){alert('new')}  

13.   },{  

14.     iconCls:'icon-save'

15.     handler:function(){alert('save')}  

16.   }]  

17. });  

移動Panel

調用 'move' 方法把Panel移動到新位置。

1. $('#p').panel('move',{  

2.   left:100,  

3.   top:100  

4. });  

加載內容

讓我們經由ajax加載panel內容並且當加載成功時顯示一些信息。

1. $('#p').panel({  

2.     href:'content_url.php',  

3.     onLoad:function(){  

4.         alert('loaded successfully');  

5.     }  

6. }); 

特性

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

事件

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

方法

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