jQuery EasyUI API - Layout - Layout[原創漢化官方API]

時間 2019-11-15

標籤 jquery easyui api layout 原創官方欄目 JQuery 简体版

原文原文鏈接

最近在學習jQuery EasyUI，發現中文的文檔好少，部分文檔不錯但它是鳥語的，爲了你們也爲了本身學習吧，漢化作一下筆記。php

有沒有說清楚的，或者翻譯不正確的地方還請你們諒解指出。。css

因爲工做時間緣由，天天翻譯一點，最後會整理出一套幫助文檔發佈給你們，一塊兒期待哈。。異步

還有。。。贊一下了哈~打字很累的。。(*^_^*)工具

Layout

覆蓋默認值 $.fn.layout.defaults.佈局

　　佈局，最多能夠有五個區域的容器：north(北), south(南), east(東), west(西) 和 center(中間)，center 中間的區域是必須的，可是面板邊緣區域的面板是可選的。學習

　　每個邊緣區域面板均可以經過拖動邊框來調整大小，他們還能夠經過點擊收縮/展開按鈕將其收縮/展開。ui

　　佈局能夠嵌套，從而使用戶能夠構建本身須要的複雜的佈局。spa

依賴關係

panel
resizable

用法示例

建立佈局

1. 經過HTML標記建立佈局。翻譯

爲<div/>標籤添加 'easyui-layout' 類：code

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

2. 在整個頁面建立Layout佈局：

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

3. 建立嵌套佈局。

請注意，裏面的 west(西部的) 佈局是展開的：

1 <body class="easyui-layout">  
2     <div data-options="region:'north'" style="height:100px"></div>  
3     <div data-options="region:'center'">  
4         <div class="easyui-layout" data-options="fit:true">  
5             <div data-options="region:'west',collapsed:true" style="width:180px"></div>  
6             <div data-options="region:'center'"></div>  
7         </div>  
8     </div>  
9 </body>

4. 使用Ajax加載內容。

Layout是基於 panel 面板建立的。各地區的panel面板提供了異步加載內容的URL支持。使用異步加載技術，用戶能夠使本身的佈局頁面顯示地更加「快捷」。

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

收起Layout佈局面板

1 $('#cc').layout();   
2 // collapse the west panel   
3 $('#cc').layout('collapse','west');

向 west(西部的) panel 面板中添加工具按鈕

 1 $('#cc').layout('add',{   
 2     region: 'west',   
 3     width: 180,   
 4     title: 'West Title',   
 5     split: true,   
 6     tools: [{   
 7         iconCls:'icon-add',   
 8         handler:function(){alert('add')}   
 9     },{   
10         iconCls:'icon-remove',   
11         handler:function(){alert('remove')}   
12     }]   
13 });

佈局選項

名稱	類型	描述	默認值
fit	boolean	設置爲「true」來設置它佈局大小，以適應它的父級容器。當在「body」標籤上建立佈局Layout佈局時，它將會自動最大化到整個頁面的大小。	false

區域面板選項

區域面板選項在panel面板中定義，一面是一些經常使用的屬性值：

名稱	類型	描述	默認值
title	string	Layout佈局中panel面板的標題文字。	null
region	string	定義Layout佈局面板的位置，該值能夠是下列之一：north(北), south(南), east(東), west(西), center(中).
border	boolean	設置爲「true」則顯示Layout佈局面板的邊框。	true
split	boolean	設置爲「true」則顯示分隔符以使用戶能夠改變panel面板的大小。	false
iconCls	string	一個icon圖標css的class類，用於在panel標題上顯示指定的圖標。	null
href	string	一個從遠程站點加載數據的URL。	null

方法

名稱	參數	描述
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面板，該參數是一個配置對象，詳細信息請參見Tab Panel屬性。
remove	region	刪除指定的面板，「region」參數可能的值有：‘north'(北),'south'(南),'east'(東),'west'(西)。