EasyUi_学习之路_05

来源:互联网 发布:图片加文字软件 编辑:程序博客网 时间:2024/05/17 08:25

今天学习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" onclick="getPanel();" />
    </div>
    <div data-options="region:'center',title:'center title'" href="first.jsp" style="padding: 5px;background: #eee;">
    <!--如果这里指定了href属性,那么我们自己在这个部分写的代码将不会被现实-->
        <input type="button" value="获取panel" onclick="getPanel();" />        
    </div>
</body>
</html>


Layout 选项

名称类型描述默认fitbooleanSet 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:

名称类型描述默认titlestringThe layout panel title text.nullregionstringDefines the layout panel position, the value is one of following: north, south, east, west, center. borderbooleanTrue to show layout panel border.truesplitboolean如果设置为true将显示一个分隔条,用户可以拖动分隔条来改变布局面板的尺寸。falseiconClsstringAn icon CSS class to show a icon on panel header.nullhrefstring在指定区域内加载页面的body中的部分,其他不加载nullcollapsiblebooleanDefines if to show collapsible button.trueminWidthnumberThe minimum panel width.10minHeightnumberThe minimum panel height.10maxWidthnumberThe maximum panel width.10000maxHeightnumberThe maximum panel height.10000

Methods

名称参数描述resizenoneSet the layout size.panelregionReturn the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.collapseregionCollapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.expandregionExpand the specified panel, the 'region' parameter possible values:'north','south','east','west'.addoptionsAdd a specified panel, the options parameter is a config object, see tab panel properties for more details.removeregionRemove the specified panel, the 'region' parameter possible values:'north','south','east','west'.