easyUI layout布局

EasyUI Layout 布局

通過 $.fn.layout.defaults 重寫默認的 defaults。

布局(layout)是有五個區(qū)域(北區(qū) north、南區(qū) south默蚌、東區(qū) east洪碳、西區(qū) west 和中區(qū) center)的容器。中間的區(qū)域面板是必需的羡滑,邊緣區(qū)域面板是可選的拓挥。每個邊緣區(qū)域面板可通過拖拽邊框調整尺寸唠梨,也可以通過點擊折疊觸發(fā)器來折疊面板。布局(layout)可以嵌套侥啤,因此用戶可建立復雜的布局当叭。


依賴

panel

resizable

用法

創(chuàng)建布局(Layout)

1茬故、通過標記創(chuàng)建布局(Layout)。

添加 'easyui-layout' class 到

標記科展。

2均牢、在整個頁面上創(chuàng)建布局(Layout)糠雨。

3才睹、創(chuàng)建嵌套布局。

請注意甘邀,內(nèi)部布局的西區(qū)面板是折疊的琅攘。

4、通過 ajax 加載內(nèi)容松邪。

布局(layout)是基于面板(panel)創(chuàng)建的坞琴。各區(qū)域面板提供從 URL 動態(tài)加載內(nèi)容的內(nèi)建支持。使用動態(tài)加載技術逗抑,用戶可以讓他們的布局頁面更快地顯示剧辐。

折疊布局面板(Collpase Layout Panel)

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

// collapse the west panel

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

通過工具按鈕添加西區(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')}

}]

});

布局選項(Layout Options)

名稱類型描述默認值

fitboolean當設置為 true 時,就設置布局(layout)的尺寸適應它的父容器邮府。當在 'body' 標簽上創(chuàng)建布局(layout)時荧关,它將自動最大化到整個頁面的全部尺寸。false

區(qū)域面板選項(Region Panel Options)

區(qū)域面板選項(Region Panel Options)是定義在面板(panel)組件中褂傀,下面是一些共同的和新增的屬性:

名稱類型描述默認值

titlestring布局面板(layout panel)的標題文本忍啤。null

regionstring定義布局面板(layout panel)的位置,其值是下列之一:north仙辟、south同波、east、west叠国、center未檩。

borderboolean當設置為 true 時,就顯示布局面板(layout panel)的邊框粟焊。true

splitboolean當設置為 true 時冤狡,就顯示拆分欄,用戶可以用它改變面板(panel)的尺寸吆玖。false

iconClsstring在面板(panel)頭部顯示一個圖標的 CSS class筒溃。null

hrefstring從遠程站點加載數(shù)據(jù)的 URL 。null

collapsibleboolean定義是否顯示可折疊按鈕沾乘。true

minWidthnumber面板(panel)最小寬度怜奖。10

minHeightnumber面板(panel)最小高度。10

maxWidthnumber面板(panel)最大寬度翅阵。10000

maxHeightnumber面板(panel)最大高度歪玲。10000

方法

名稱

參數(shù)描述

resizenone設置布局(layout)的尺寸迁央。

panelregion返回指定的面板(panel),'region' 參數(shù)可能的值是:'north'滥崩、'south'岖圈、'east'、'west'钙皮、'center'蜂科。

collapseregion折疊指定的面板(panel),'region' 參數(shù)可能的值是:'north'短条、'south'导匣、'east'、'west'茸时。

expandregion展開指定的面板(panel)贡定,'region' 參數(shù)可能的值是:'north'、'south'可都、'east'缓待、'west'。

addoptions添加一個指定的面板(panel)渠牲,options 參數(shù)一個配置對象旋炒,更多細節(jié)請參閱標簽頁面板(tab panel)屬性。

removeregion移除指定的面板(panel)嘱兼,'region' 參數(shù)可能的值:'north'国葬、'south'、'east'芹壕、'west'汇四。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市踢涌,隨后出現(xiàn)的幾起案子通孽,更是在濱河造成了極大的恐慌,老刑警劉巖睁壁,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件背苦,死亡現(xiàn)場離奇詭異,居然都是意外死亡潘明,警方通過查閱死者的電腦和手機行剂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钳降,“玉大人厚宰,你說我怎么就攤上這事。” “怎么了铲觉?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵澈蝙,是天一觀的道長。 經(jīng)常有香客問我撵幽,道長灯荧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任盐杂,我火速辦了婚禮逗载,結果婚禮上,老公的妹妹穿的比我還像新娘况褪。我一直安慰自己撕贞,他們只是感情好更耻,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布测垛。 她就那樣靜靜地躺著,像睡著了一般秧均。 火紅的嫁衣襯著肌膚如雪食侮。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天目胡,我揣著相機與錄音锯七,去河邊找鬼。 笑死誉己,一個胖子當著我的面吹牛眉尸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播巨双,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼噪猾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筑累?” 一聲冷哼從身側響起袱蜡,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎慢宗,沒想到半個月后坪蚁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡镜沽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年敏晤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缅茉。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡嘴脾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宾舅,到底是詐尸還是另有隱情统阿,我是刑警寧澤彩倚,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站扶平,受9級特大地震影響帆离,放射性物質發(fā)生泄漏。R本人自食惡果不足惜结澄,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一哥谷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧麻献,春花似錦们妥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至齿桃,卻和暖如春惑惶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背短纵。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工带污, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人香到。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓鱼冀,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悠就。 傳聞我的和親對象是個殘疾皇子千绪,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容