Layout(布局)

使用$.fn.layout.defaults重寫默認值對象。

布局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。每個邊緣區域面板都可以通過拖拽其邊框改變大小，也可以點擊折疊按鈕將面板折疊起來。布局可以進行嵌套，用戶可以通過組合布局構建復雜的布局結構。

創建布局

1. 通過標簽創建布局

為< div/>標簽增加名為'easyui-layout'的類ID。

2. 使用完整頁面創建布局

3. 創建嵌套布局

注意：嵌套在內部的布局面板的左側(西面)面板是折疊的。

4. 通過ajax讀取內容

布局是以面板為基礎創建的。所有的布局面板都支持異步加載URL內容。使用異步加載技術，用戶可以使自己的布局頁面顯示的內容更多更快。

折疊布局面板

$('#cc').layout();

// collapse the west panel

$('#cc').layout('collapse','west');

添加西側區域面板和工具菜單按鈕

$('#cc').layout('add',{

region: 'west',

width: 180,

title: 'West Title',

split: true,

tools: [{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-remove',

handler:function(){alert('remove')}

}]

});

屬性名

屬性值類型

描述

默認值

fit

boolean

如果設置為true，布局組件將自適應父容器。當使用'body'標簽創建布局的時候，整個頁面會自動最大。

false

事件名

事件參數

描述

onCollapse

region

在折疊區域面板的時候觸發。(該事件自1.4.4版開始可用)

onExpand

region

在展開區域面板的時候觸發。(該事件自1.4.4版開始可用)

onAdd

region

在新增區域面板的時候觸發。(該事件自1.4.4版開始可用)

onRemove

region

在移除區域面板的時候觸發。(該事件自1.4.4版開始可用)

區域面板屬性定義與panel組件類似，下面的是公共的和新增的屬性：

屬性名

屬性值類型

描述

默認值

title

string

布局面板標題文本。

null

region

string

定義布局面板位置，可用的值有：north, south, east, west, center。

border

boolean

為true時顯示布局面板邊框。

true

split

boolean

為true時用戶可以通過分割欄改變面板大小。

false

iconCls

string

一個包含圖標的CSS類ID，該圖標將會顯示到面板標題上。

null

href

string

用于讀取遠程站點數據的URL鏈接

null

collapsible

boolean

定義是否顯示折疊按鈕。(該屬性自1.3.3版開始可用)

true

minWidth

number

最小面板寬度。(該屬性自1.3.3版開始可用)

10

minHeight

number

最小面板高度。(該屬性自1.3.3版開始可用)

10

maxWidth

number

最大面板寬度。(該屬性自1.3.3版開始可用)

10000

maxHeight

number

最大面板高度。(該屬性自1.3.3版開始可用)

10000

expandMode

string

在點擊折疊面板時候的擴展模式。可用值有：“float”、“dock”和null

float：區域面板將展開并浮動在頂部，在鼠標焦點離開面板時會自動隱藏。

dock：區域面板將展開并釘在面板上，在鼠標焦點離開面板時不會自動隱藏。

null：什么也不會發生。

(該屬性自1.4.4版開始可用)

float

collapsedSize

number

折疊后的面板大小。(該屬性自1.4.4版開始可用)

28

hideExpandTool

boolean

為true時隱藏折疊面板上的擴展面板工具。(該屬性自1.4.4版開始可用)

false

hideCollapsedContent

boolean

為true時隱藏折疊面板上的標題欄。(該屬性自1.4.4版開始可用)

true

collapsedContent

string,function(title)

定義在折疊面板上要顯示標題內容。

1. 標題字符串；

2. 通過函數返回標題內容。

(該方法自1.4.4版開始可用)

代碼示例：

collapsedContent: function(title){

var region = $(this).panel('options').region;

if (region == 'north' || region == 'south'){

return title;

} else {

return '

'+title+'

';

}

}

方法名

方法參數

描述

resize

param

設置布局大小。param對象包含如下屬性：

width：布局寬度。

height：布局高度。

代碼示例：

$('#cc').layout('resize', {

width:'80%',

height:300

})

panel

region

返回指定面板，'region'參數可用值有：'north','south','east','west','center'。

collapse

region

折疊指定面板。'region'參數可用值有：'north','south','east','west'。

expand

region

展開指定面板。'region'參數可用值有：'north','south','east','west'。

add

options

添加指定面板。屬性參數是一個配置對象，更多細節請查看選項卡面板屬性。

remove

region

移除指定面板。'region'參數可用值有：'north','south','east','west'。

split

region

分割區域面板。'region'參數可用值有：'north','south','east','west'。(該方法自1.4.2版開始可用)

代碼示例：

$("#layout").layout("split", "west");

unsplit

region

移除指定面板。'region'參數可用值有：'north','south','east','west'。(該方法自1.4.2版開始可用)

代碼示例：

$("#layout").layout("unsplit", "west");

總結

以上是生活随笔為你收集整理的php layout布局文件,layout（布局） - jQuery EasyUI中文文档 - EasyUI中文站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。