没有自适应父容器
Paste_Image.png
自适应父容器
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyui -->
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
type="text/css"></link>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!--
class：指定easyui控件类型；
data-options:指定控件的属性或事件
属性：data-options="属性名：属性值[,属性名：属性值]"
事件： data-options="事件名：function(){}
调用控件方法：$(选择器).控件类型(方法名，参数列表)
-->
<div id="dd" class="easyui-layout" style="width:600px;height:400px" data-options="fit:true">
<!-- 布局使用fit属性，布局组件将自适应父容器或使用'body'标签创建布局的时候，整个页面会自动最大 -->
<div data-options="region:'north',title:'北：不可分割',split:false"
style="height: 100px;">
</div>
<!-- 该面板不可分割-->
<div data-options="region:'south',title:'南：没边框',split:true,border:false"
style="height: 100px;">
</div>
<!-- 该面板没有border -->
<div data-options="region:'east',iconCls:'icon-reload',title:'东：设置图标',split:true"
style="width: 100px;">
</div>
<!-- 该面板设置了图标 -->
<div data-options="region:'west',collapsible:false,title:'西：无折叠',split:true"
style="width: 100px;">
</div>
<!-- 该面板没有折叠按钮 -->
<div data-options="region:'center',title:'中间'"
style="padding: 5px; background: #eee;">
</div>
</div>
<!-- 上下面板设置高度，左右面板设置宽度，中间可以设置padding -->
<script type="text/javascript">
$(function(){
$('#dd').layout('collapse','north');
/* 页面加载完成后北面板自动折叠 */
$('#dd').layout('remove','south')
/* 页面加载完成后删除南面板 */
/* 页面加载完成后添加南面板 */
$('#dd').layout('add',{
region:'south',
iconCls:'icon-save',
title:'重新添加的南面板',
witdh:150,/* 这里配置的width不用加px */
collapsible:true
})
})
</script>
</body>
</html>
Paste_Image.png
layout.gif
网友评论