DIV CSS 佈局教程網

用$.fn.panel.defaults重寫defaults。
用法示例
創建Panel
1. 經由標記創建Panel
從標記創建Panel更容易。把 'easyui-panel' 類添加到<div/>標記。
代碼如下:
<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. 編程創建Panel
讓我們創建帶右上角工具欄的Panel。.
代碼如下:
<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
調用 'move' 方法把Panel移動到新位置。
代碼如下:
$('#p').panel('move',{
left:100,
top:100
});

加載內容
讓我們經由ajax加載panel內容並且當加載成功時顯示一些信息。
代碼如下:
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});

特性

名稱

類型

說明

默認值

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身體。