Layout（布局）
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构 <%@ page language="java" import="java.util.*"
·
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout:通过标签创建布局</title>
<!-- 引入easyUI:JQuery文件支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
<!-- 引入easyUI -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<!-- 引入中文支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入easyUI主题css文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
<!-- 引入easyUI 图标导航文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
<body>
<%
/*
为div标签增加名为'easyui-layout'的类ID
region:布局面板位置; title:布局面板标题; split:true时可以通过分割栏改变面板大小
iconCls:包含图标的CSS类ID(icon-**)
可以在标签中间层输入html或文本
*/
%>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'上',split:false" style="height:100px;">Up</div>
<div data-options="region:'south',title:'下',split:true" style="height:100px;">Down</div>
<div data-options="region:'east',iconCls:'icon-no',title:'东',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"><h1>墨渐生微</h1></div>
</div>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout:使用完整页面创建布局</title>
<!-- 引入easyUI:JQuery文件支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
<!-- 引入easyUI -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<!-- 引入中文支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入easyUI主题css文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
<!-- 引入easyUI 图标导航文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
<body class="easyui-layout">
<%
/*
为div标签增加名为'easyui-layout'的类ID
region:布局面板位置; title:布局面板标题; split:true时可以通过分割栏改变面板大小
iconCls:包含图标的CSS类ID(icon-**)
*/
%>
<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;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout:嵌套布局</title>
<!-- 引入easyUI:JQuery文件支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
<!-- 引入easyUI -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<!-- 引入中文支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入easyUI主题css文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
<!-- 引入easyUI 图标导航文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
</head>
<body class="easyui-layout">
<%
/*
fit:布局组件将自适应父容器
collapsed:是否显示折叠按钮
*/
%>
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:true" style="width:180px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JS代码创建布局</title>
<!-- 引入easyUI:JQuery文件支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
<!-- 引入easyUI -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<!-- 引入中文支持 -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入easyUI主题css文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
<!-- 引入easyUI 图标导航文件 -->
<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
<script type="text/javascript">
$(document).ready(function(){
$('#cc').layout('add',{
region: 'west',
width: 180,
title: '西',
split: true,
tools: [{
iconCls:'icon-add',
handler:function(){alert('add');}
},{
iconCls:'icon-remove',
handler:function(){alert('remove');}
}]
});
});
</script>
</head>
<body>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)