easyUI中的layout

曾经终败给现在 2022-08-10 15:57 214阅读 0赞

##  ##

### Layout ###

通过$.fn.layout.defaults可以重写Layout.

layout是一个具有五个区域的容器。只有中间区域面板是必须的，**其余的都是边界面板。每一个边界面板都可以通过拖动它的边界来改变尺寸，还可以通过面板上的收缩\\展开按钮来收缩或者展开面板。另外，layout还可以嵌套，因此我们可以用它来创建一个复杂的layout。**

![layout.png][]

#### 依赖 ####

*  panel
 *  resizable

#### 使用 示例 ####

##### 创建Layout #####

**1、添加一个'easyui-layout'的class来创建Layout**

**2、创建一个全屏的Layout**

**3、创建一个嵌套的Layout**

**4、通过ajax来载入内容**

#### Layout 属性 ####

#### 区域面板的属性 ####

区域面板的很多选项都定义在panel组件中了，下面列出的是区域面板中增加的一些常用选项

<table style="font-size:14px; border-collapse:collapse; border-spacing:0px; color:rgb(68,68,68); font-family:verdana,helvetica,arial,sans-serif"> 
 <tbody> 
  <tr> 
   <th style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em; background:rgb(238,238,238)"> <strong>Name</strong></th> 
   <th style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em; background:rgb(238,238,238)"> <strong>Type</strong></th> 
   <th style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em; background:rgb(238,238,238)"> <strong>Description</strong></th> 
   <th style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em; background:rgb(238,238,238)"> <strong>Default</strong></th> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> title</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> string</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 区域面板的标题</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> null</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> region</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> string</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 定义区域面板的位置，值域为: north, south, east, west, center.</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> border</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> boolean</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 是否显示边框</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> true</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> split</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> boolean</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 是否隔开两块区域面板，并可以resize</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> false</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> iconCls</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> string</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 显示在区域面板标题之前的图标</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> null</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> href</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> string</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> ajax载入内容的地址</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> null</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> collapsible</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> boolean</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 是否显示收缩\展开按钮</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> true</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> minWidth</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> number</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 区域面板的最小宽</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 10</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> minHeight</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> number</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> <span style="color:rgb(68,68,68); font-size:14px">区域面板的最小高</span></td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 10</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> maxWidth</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> number</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> <span style="color:rgb(68,68,68); font-size:14px">区域面板的最大宽</span></td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 10000</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> maxHeight</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> number</td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> <span style="color:rgb(68,68,68); font-size:14px">区域面板的最大高</span></td> 
   <td style="font-size:14px; border:1px solid rgb(140,172,187); padding:0.3em 0.7em"> 10000</td> 
  </tr> 
 </tbody> 
</table>

#### 方法 ####

[layout.png]: /images/20220810/031f20da2a134cbf8b3c6ad431f7d300.png