jQuery EasyUI API 中文文檔 - 面闆（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

在Panel裡顯示一個16x16圖示的CSS類。

width

number

設定Panel的寬度。

auto

height

設定Panel的高度。

left

設定Panel的左邊位置。

top

設定Panel的頂部位置。

cls

給Panel增加一個CSS類。

headerCls

給Panel頭部增加一個CSS類。

bodyCls

給Panel身體增加一個CSS類。

style

object

給Panel增加自定義格式的樣式。

{}

fit

boolean

當設為true時，Panel的 尺寸就适應它的父容器。

false

border

定義了是否顯示Panel的邊框。

true

doSize

設定為true，建立時Panel就調整尺寸并做成布局。

noheader

要是設定為true，Panel的頭部将不會被建立。

content

Panel身體的内容。

collapsible

定義了是否顯示折疊按鈕。

minimizable

定義了是否顯示最小化按鈕。

maximizable

定義了是否顯示最大化按鈕。

closable

定義了是否顯示關閉按鈕。

tools

array

自定義工具組，每個工具包含兩個特性：

iconCls和handler

[]

collapsed

定義了初始化Panel是不是折疊的。

minimized

定義了初始化Panel是不是最小化的。

maximized

定義了初始化Panel是不是最大化的。

closed

定義了初始化Panel是不是關閉的。

href

一個URL，用它加載遠端資料并且顯示在Panel裡。

cache

設定為true就緩存從href加載的Panel内容。

loadingMessage

當加載遠端資料時在Panel裡顯示的一條資訊。

Loading…

extractor

function

定義了如何從ajax響應抽出内容，傳回抽出的資料。

參數

onLoad

none

當遠端資料被加載時觸發。

onBeforeOpen

Panel打開前觸發，傳回false就停止打開。

onOpen

Panel打開後觸發。

onBeforeClose

Panel關閉前觸發，傳回false就取消關閉。

onClose

Panel關閉後觸發。

onBeforeDestroy

Panel銷毀前觸發，傳回false就取消銷毀。

onDestroy

Panel銷毀後觸發。

onBeforeCollapse

Panel折疊前觸發，傳回false就停止折疊。

onCollapse

Panel折疊後觸發。

onBeforeExpand

Panel展開前觸發，傳回false就停止展開。

onExpand

Panel展開後觸發。

onResize

width, height

Panel調整尺寸後觸發。

width：新的外部寬度。

height：新的外部高度

onMove

left,top

Panel移動後觸發。

left：新的左邊位置

Top：新的頂部位置

onMaximize

視窗最大化後觸發。

onRestore

視窗還原為它的原始尺寸後觸發。

onMinimize

視窗最小化後觸發。

options

傳回選項特性。

panel

傳回Panel對象。

header

傳回Panel頭部對象。

body

傳回Panel身體對象。

setTitle

設定頭部的标題文字。

open

forceOpen

當forceOpen參數設為true，就繞過onBeforeOpen回調函數打開Panel。

close

forceClose

當forceClose參數設為true，就繞過onBeforeClose回調函數關閉Panel。

destroy

forceDestroy

當forceDestroy參數設為true，就繞過onBeforeDestroy回調函數銷毀Panel。

refresh

當設定了href特性時，重新整理Panel加載遠端資料。

resize

設定Panel尺寸并做布局。Options對象包含下列特性：

width：新的Panel寬度

height：新的Panel高度

left：新的Panel左邊位置

top：新的Panel頂部位置

move

移動Panel到新位置。Options對象包含下列特性：

maximize

Panel适應它的容器的尺寸。

minimize

最小化Panel。

restore

把最大化的Panel還原為它原來的尺寸和位置。

collapse

animate

折疊Panel身體。

expand

展開Panel身體。