EasyUI中layout布局的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中layout布局的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
布局選項（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'。 |
實現
簡單layout布局的實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <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> </body> </html>在整個頁面上創建布局
將class="easyui-layout"放在body上
<body class="easyui-layout">layout動態加載內容
新建動態加載頁面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> 動態加載內容 </body> </html>添加href屬性實現動態加載內容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <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',href:'dynamic.html'" style="padding:5px;background:#eee;"></div> </div> </body> </html>效果
總結
以上是生活随笔為你收集整理的EasyUI中layout布局的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot+Jquery+Js
- 下一篇： EasyUI中Tabs标签页的简单使用