带你玩转jQuery EasyUI Layout组件

最新推荐文章于 2024-09-13 23:28:46 发布

dandandegeshou

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量333

点赞数

说明：（$.fn.layout）布局，依赖panel和resizable,默认分为5个区东east,西west,南south,北north,中center,中间的区域面板是必须的，边缘区域面板是可选的，每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局可嵌套，因此用户可建立复杂的布局。
基础用法：

<div id="l" class="easyui-layout">
<div data-options="region:'east',width:100,title:'east title'"></div>
<div data-options="region:'west',width:200,title:'west title'"></div>
<div data-options="region:'south',width:100,height:100,title:'south title'"></div>
<div data-options="region:'north',width:100,height:100,title:'north title'"></div>
<div data-options="region:'center',title:'center title'">
<div id="ll" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',title:'sub west title',width:200"></div>
<div data-options="region:'center',title:'sub center title',collapsed:true"></div>
</div>
</div>
</div>

<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var width = $（document）。width（）；
var height = $（document）。height（）；
$（'#l'）。layout（{
width: width,
height: height,
}）；
</script>
布局属性：
fit -> boolean
说明：当设置为true时，就设置布局的尺寸适应它的父容器，当在body标签上创建布局时，它将自动最大化到整个页面的全部尺寸

<body class="easyui-layout" data-options="fit:true">
<div data-options="region:'east',width:100,title:'east title'"></div>
<div data-options="region:'west',width:200,title:'west title'"></div>
<div data-options="region:'south',width:100,height:100,title:'south title'"></div>
<div data-options="region:'north',width:100,height:100,title:'north title'"></div>
<div data-options="region:'center',title:'center title'">
<div id="ll" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',title:'sub west title',width:200"></div>
<div data-options="region:'center',title:'sub center title',collapsed:true"></div>
</div>

</div>

<a href="www.changtu.com/chezhan/jinanshi/17375.html" target="_blank">济南长途汽车总站南区</a>

<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</body>