Layout(布局)

使用$.fn.layout.defaults重寫默認(rèn)值對象。

布局容器有5個(gè)區(qū)域：北、南、東、西和中間。中間區(qū)域面板是必須的，邊緣的面板都是可選的。每個(gè)邊緣區(qū)域面板都可以通過拖拽其邊框改變大小，也可以點(diǎn)擊折疊按鈕將面板折疊起來。布局可以進(jìn)行嵌套，用戶可以通過組合布局構(gòu)建復(fù)雜的布局結(jié)構(gòu)。

創(chuàng)建布局

1. 通過標(biāo)簽創(chuàng)建布局

為< div/>標(biāo)簽增加名為'easyui-layout'的類ID。

2. 使用完整頁面創(chuàng)建布局

3. 創(chuàng)建嵌套布局

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

4. 通過ajax讀取內(nèi)容

布局是以面板為基礎(chǔ)創(chuàng)建的。所有的布局面板都支持異步加載URL內(nèi)容。使用異步加載技術(shù)，用戶可以使自己的布局頁面顯示的內(nèi)容更多更快。

折疊布局面板

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

// collapse the west panel

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

添加西側(cè)區(qū)域面板和工具菜單按鈕

$('#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')}

}]

});

屬性名

屬性值類型

描述

默認(rèn)值

fit

boolean

如果設(shè)置為true，布局組件將自適應(yīng)父容器。當(dāng)使用'body'標(biāo)簽創(chuàng)建布局的時(shí)候，整個(gè)頁面會自動最大。

false

事件名

事件參數(shù)

描述

onCollapse

region

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

onExpand

region

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

onAdd

region

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

onRemove

region

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

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

屬性名

屬性值類型

描述

默認(rèn)值

title

string

布局面板標(biāo)題文本。

null

region

string

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

border

boolean

為true時(shí)顯示布局面板邊框。

true

split

boolean

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

false

iconCls

string

一個(gè)包含圖標(biāo)的CSS類ID，該圖標(biāo)將會顯示到面板標(biāo)題上。

null

href

string

用于讀取遠(yuǎn)程站點(diǎn)數(shù)據(jù)的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

在點(diǎn)擊折疊面板時(shí)候的擴(kuò)展模式。可用值有：“float”、“dock”和null

float：區(qū)域面板將展開并浮動在頂部，在鼠標(biāo)焦點(diǎn)離開面板時(shí)會自動隱藏。

dock：區(qū)域面板將展開并釘在面板上，在鼠標(biāo)焦點(diǎn)離開面板時(shí)不會自動隱藏。

null：什么也不會發(fā)生。

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

float

collapsedSize

number

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

28

hideExpandTool

boolean

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

false

hideCollapsedContent

boolean

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

true

collapsedContent

string,function(title)

定義在折疊面板上要顯示標(biāo)題內(nèi)容。

1. 標(biāo)題字符串；

2. 通過函數(shù)返回標(biāo)題內(nèi)容。

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

代碼示例：

collapsedContent: function(title){

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

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

return title;

} else {

return '

'+title+'

';

}

}

方法名

方法參數(shù)

描述

resize

param

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

width：布局寬度。

height：布局高度。

代碼示例：

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

width:'80%',

height:300

})

panel

region

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

collapse

region

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

expand

region

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

add

options

添加指定面板。屬性參數(shù)是一個(gè)配置對象，更多細(xì)節(jié)請查看選項(xiàng)卡面板屬性。

remove

region

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

split

region

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

代碼示例：

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

unsplit

region

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

代碼示例：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。