EasyUI布局管理

来源：互联网发布：unity3d 阴影锯齿编辑：程序博客网时间：2024/06/06 12:11

边框布局：

north 区域可以用来显示网站的标语。
south 区域可以用来显示版权以及一些说明。
west 区域可以用来显示导航菜单。
east 区域可以用来显示一些推广的项目。
center 区域可以用来显示主要的内容。

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>jQuery EasyUI Demo</title>    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="themes/icon.css">    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="jquery.easyui.min.js"></script></head><body>    <div class="easyui-layout" style="width:600px;height:150px;margin-left: 30%;">        <div region="west" split="true" title="West区域" style="width:150px;background-color: aqua;height:150px;">            <p style="font-size: 20px;">West Content</p>        </div>        <div region="east" split="true" title="East区域" style="width:150px;background-color: #77a6ff;height:150px;">            <p style="font-size: 20px;">East Content</p>        </div>        <div id="content" region="center" title="center 区域" style="width: 150px;background-color: #e14eff;height:150px">            <p style="font-size: 20px;">Center Content</p>        </div>    </div></body></html>

注意点：

1:边框容器要加上class="easyui-layout"

2:容器中一定要有“中间区域”(region="cneter")

3:split属性用于分开区域与中间区域

0 0