jQuery EasyUI 布局插件 – Layout 布局

2018-09-10 03:53 更新

jQuery EasyUI 布局插件 - Layout 布局

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.layout.defaults 重寫默認(rèn)的 defaults。

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

依賴

  • panel
  • resizable

用法

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

1、通過標(biāo)記創(chuàng)建布局（Layout）。

添加 'easyui-layout' class 到 <div> 標(biāo)記。

<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、在整個(gè)頁面上創(chuàng)建布局（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、創(chuàng)建嵌套布局。

請(qǐng)注意，內(nèi)部布局的西區(qū)面板是折疊的。

<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 加載內(nèi)容。

布局（layout）是基于面板（panel）創(chuàng)建的。各區(qū)域面板提供從 URL 動(dòng)態(tài)加載內(nèi)容的內(nèi)建支持。使用動(dòng)態(tài)加載技術(shù)，用戶可以讓他們的布局頁面更快地顯示。

<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');

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

布局選項(xiàng)（Layout Options）

名稱 類型 描述 默認(rèn)值
fit boolean 當(dāng)設(shè)置為 true 時(shí)，就設(shè)置布局（layout）的尺寸適應(yīng)它的父容器。當(dāng)在 'body' 標(biāo)簽上創(chuàng)建布局（layout）時(shí)，它將自動(dòng)最大化到整個(gè)頁面的全部尺寸。 false

區(qū)域面板選項(xiàng)（Region Panel Options）

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

名稱 類型 描述 默認(rèn)值
title string 布局面板（layout panel）的標(biāo)題文本。 null
region string 定義布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border boolean 當(dāng)設(shè)置為 true 時(shí)，就顯示布局面板（layout panel）的邊框。 true
split boolean 當(dāng)設(shè)置為 true 時(shí)，就顯示拆分欄，用戶可以用它改變面板（panel）的尺寸。 false
iconCls string 在面板（panel）頭部顯示一個(gè)圖標(biāo)的 CSS class。 null
href string 從遠(yuǎn)程站點(diǎn)加載數(shù)據(jù)的 URL 。 null
collapsible boolean 定義是否顯示可折疊按鈕。 true
minWidth number 面板（panel）最小寬度。 10
minHeight number 面板（panel）最小高度。 10
maxWidth number 面板（panel）最大寬度。 10000
maxHeight number 面板（panel）最大高度。 10000

方法

名稱 參數(shù) 描述
resize none 設(shè)置布局（layout）的尺寸。
panel region 返回指定的面板（panel），'region' 參數(shù)可能的值是：'north'、'south'、'east'、'west'、'center'。
collapse region 折疊指定的面板（panel），'region' 參數(shù)可能的值是：'north'、'south'、'east'、'west'。
expand region 展開指定的面板（panel），'region' 參數(shù)可能的值是：'north'、'south'、'east'、'west'。
add options 添加一個(gè)指定的面板（panel），options 參數(shù)一個(gè)配置對(duì)象，更多細(xì)節(jié)請(qǐng)參閱標(biāo)簽頁面板（tab panel）屬性。
remove region 移除指定的面板（panel），'region' 參數(shù)可能的值：'north'、'south'、'east'、'west'。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)