jQuery EasyUI 佈局插件– Layout 佈局

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

佈局（layout）是有五個區域（北區north、南區south、東區east、西區west 和中區center）的容器。中間的區域面板是必需的，邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸，也可以通過點擊折疊觸發器來折疊面板。佈局（layout）可以嵌套，因此用戶可建立復雜的佈局。

依賴

panel
resizable

用法

創建佈局（Layout）

1、通過標記創建佈局（Layout）。

添加'easyui-layout' class 到<div> 標記。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2、在整個頁面上創建佈局（Layout）。

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3、創建嵌套佈局。

請注意，內部佈局的西區面板是折疊的。

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'west',collapsed:true" style="width:180px"></div>
			<div data-options="region:'center'"></div>
		</div>
    </div>
</body>

4、通過ajax 加載內容。

佈局（layout）是基於面板（panel）創建的。各區域面板提供從URL 動態加載內容的內建支持。使用動態加載技術，用戶可以讓他們的佈局頁面更快地顯示。

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

折疊佈局面板（Collpase Layout Panel）

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

佈局選項（Layout Options）

名称	类型	描述	默认值
fit	boolean	当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。	false

區域面板選項（Region Panel Options）

區域面板選項（Region Panel Options）是定義在面板（panel）組件中，下面是一些共同的和新增的屬性：

名称	类型	描述	默认值
title	string	布局面板（layout panel）的标题文本。	null
region	string	定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border	boolean	当设置为 true 时，就显示布局面板（layout panel）的边框。	true
split	boolean	当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。	false
iconCls	string	在面板（panel）头部显示一个图标的 CSS class。	null
href	string	从远程站点加载数据的 URL 。	null
collapsible	boolean	定义是否显示可折叠按钮。	true
minWidth	number	面板（panel）最小宽度。	10
minHeight	number	面板（panel）最小高度。	10
maxWidth	number	面板（panel）最大宽度。	10000
maxHeight	number	面板（panel）最大高度。	10000

方法

名称	参数	描述
resize	none	设置布局（layout）的尺寸。
panel	region	返回指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'、'center'。
collapse	region	折叠指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
expand	region	展开指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
add	options	添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。
remove	region	移除指定的面板（panel），'region' 参数可能的值：'north'、'south'、'east'、'west'。

jQuery EasyUI插件

上一頁： jQuery EasyUI佈局插件– Accordion折疊面板

下一頁： jQuery EasyUI菜單與按鈕插件– Menu菜單

jQuery EasyUI 教程

jEasyUI 應用

jEasyUI 拖放

jEasyUI 菜單與按鈕

jEasyUI 佈局

jEasyUI 數據網格

jEasyUI 窗口

jEasyUI 樹形菜單

jEasyUI 表單

jEasyUI 參考手冊