EasyUI系列之布局Layout

最新推荐文章于 2024-11-12 11:19:19 发布

a18826265589

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanhuibing/articles/4072306.html

版权

1.类库引入

1 <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
2 <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
3 <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
4 <link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
5 <link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>

2.div标记方式实现

1 <div id="cc" class="easyui-layout" style="width:100%;height:600px;">
2     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
3     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
4     <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
5     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
6     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
7 </div>

3.创建布局在当前页

1 <body class="easyui-layout">
2     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
3     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
4     <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
5     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
6     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
7 </body>

4.创建嵌套布局

1 <body class="easyui-layout">
2     <div data-options="region:'north'" style="height:100px"></div>
3     <div data-options="region:'center'">
4         <div class="easyui-layout" data-options="fit:true">
5            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
6             <div data-options="region:'center'"></div>
7         </div>
8     </div>
9 </body>

5.通过异步方式从url属性中异步加载

1 <body class="easyui-layout">
2     <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
3     <div data-options="region:'center',href:'center_content.php'" ></div>
4 </body>