微信公众号：程序yuan
关注可了解更多的教程及排版技巧。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
10.Layout布局组件
注意
这个组件一般是直接用class方式直接配合body使用
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Layout.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<%--<body class="easyui-layout">--%>
<body>
<%--一般是直接定义在body中--%>
<div id="box" style="width: 600px; height: 400px;">
<%--一般是使用class方式来定义布局--%>
<div data-options="
region:'north',
title:'north title',
split:true,
<%--是否显示边框--%>
border:true,
iconCls:'icon-cut',
href:'http://localhost:8081/easyui/getUsers.action',
<%--设置是否可以折叠--%>
collapsible:true,
minWidth:20,
minHeight:20,
maxWidth:600,
maxHeight:200,
"
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 title' ,split:true," style="width: 100px;"></div>
<div data-options="region:'west',title:'west title' ,split:true," style="width: 100px;"></div>
<div data-options="region:'center',title:'center title', split:true," style="padding:5px; background: #ccc"></div>
</div>
<%--class加载方式--%>
<%--<div 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 title' ,split:true," style="width: 100px;"></div>
<div data-options="region:'west',title:'west title' ,split:true," style="width: 100px;"></div>
<div data-options="region:'center',title:'center title', split:true," style="padding:5px; background: #ccc"></div>
</div>--%>
</body>
</html>
JS文件
$(function () {
$("#box").layout({
//设置布局的宽高
// width:500,
// height:500,
//自动适应父容器
// fit:true,
}).css('display','none');
$("#box").layout({}).css('display','block');
$("#box").layout('resize');
// $("#box").layout('collapse','east');
// $("#box").layout('expand','east');
$("#box").layout('remove','west');//值可以去north,south,east,west
$(document).click(function () {
// $("#box").layout({}).css('display','block');
// $("#box").layout('resize');
// console.log($("#box").layout('panel','east'));
$("#box").layout('add',{
region:'west',
title:'新增面板',
width:100,
})
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
