概述
今天学习layout
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<title>布局框架</title>
<script type="text/javascript">
function getPanel() {
var southPanel = $("#layoutbody").layout('panel', 'south');
//获得panel的属性
var attributes = southPanel.panel('options');
console.info(attributes); //可以看到其中的各个属性，浏览器调试，这里说明下：使用这种框架和使用js自己书写前台代码，浏览器调试是必不可少的：火狐或者谷歌
}
</script>
</head>
<body id="layoutbody" 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',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
<input type="button" value="获取panel" οnclick="getPanel();" />
</div>
<div data-options="region:'center',title:'center title'" href="first.jsp" style="padding: 5px;background: #eee;">
<!--如果这里指定了href属性，那么我们自己在这个部分写的代码将不会被现实-->
<input type="button" value="获取panel" οnclick="getPanel();" />
</div>
</body>
</html>
Layout 选项
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| fit | boolean | Set to true to set the layout size fit its parent container.When creating layout on 'body' tag, it will be auto maximized to the full size of whole page. | false |
Region Panel Options
The region panel options is defined in panel component, below is some common and added properties:
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| title | string | The layout panel title text. | null |
| region | string | Defines the layout panel position, the value is one of following: north, south, east, west, center. | |
| border | boolean | True to show layout panel border. | true |
| split | boolean | 如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。 | false |
| iconCls | string | An icon CSS class to show a icon on panel header. | null |
| href | string | 在指定区域内加载页面的body中的部分，其他不加载 | null |
| collapsible | boolean | Defines if to show collapsible button. | true |
| minWidth | number | The minimum panel width. | 10 |
| minHeight | number | The minimum panel height. | 10 |
| maxWidth | number | The maximum panel width. | 10000 |
| maxHeight | number | The maximum panel height. | 10000 |
Methods
| 名称 | 参数 | 描述 |
|---|---|---|
| resize | none | Set the layout size. |
| panel | region | Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'. |
| collapse | region | Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'. |
| expand | region | Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'. |
| add | options | Add a specified panel, the options parameter is a config object, see tab panel properties for more details. |
| remove | region | Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'. |
最后
以上就是贪玩雪碧为你收集整理的EasyUi_学习之路_05的全部内容，希望文章能够帮你解决EasyUi_学习之路_05所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复