easyui采用了东南西北中五大布局方式，其采用的是称为layout的布局方式。要采用这种方式，那么其使用了easyui的easyui-layout的样式。那么如下的一个布局是如何实现的呢？
从整体上看，其采用的是上、左、中这样的一个布局。根据这个可以先写出下面的代码
<body class="easyui-layout">
// 下面的是上部的代码
<div region="north" id="north" border="false">
</div>
//下面的是左边的代码
<div region="west" id="west" split="true">
</div>
// 下面的主体框的代码
<div region="center" id="center" style="background:#eee;padding:0px;overflow-y:hidden">
</div>
</body>
如上的代码片断已经把整体布局搞定，接下来看每个部分的具体内容。
在最上面的原型为：
它包含了左边为系统名称，右边为欢迎用户，设置，安全退出三个部分，那么在此部分中，我们就可以用span来进行处理。
// 下面的是上部的代码
<div region="north" id="north" border="false"
style="height::46px;// 框的高度
// 加载上部分的底图颜色
background: url(/easyui/themes/images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
line-height:40px;//行高
color:#fff// 字体颜色
font-family:Verdana". 微软雅黑,黑体//字体
>
<span style="float:right; padding-right:20px;" class="head">
欢迎 ${sessionScope.aiuser.username}
<span style="padding:0px;width:60px;color: #fff;">
<a href="javascript:void(0)" id="mb1" class="easyui-menubutton" menu="#mm-set" iconCls="cog">
<font color="#FFFFFF">设置</font>
</a>
<a href="#" id="loginOut">安全退出</a>
</span>
</span>
<span style="padding-left:10px; font-size: 16px; ">
<img src="/easyui/themes/images/logo.png" width="25" height="25" align="absmiddle" />
国医堂会员系统管理后台 V1.0
</span>
</div>
如此就搞定了上部分的原型编写
上面图中原型中，左边为菜单，而且采用的是抽屉式
//下面的是左边的代码
// 下面的div定义了左边面板的宽度和以及样式
<div region="west" id="west" split="true" title="(${sessionScope.aiuser.userid})功能菜单" style="width:220px;">
// 下面的div定义了菜单内容
<div class="easyui-accordion" fit="true" border=false">
<%=request.getAttribute("mainTree)%>// 这个是由于菜单是动态生成的，所以其生成的html语句在后台生成
</div>
</div>
// 下面定义的是主体内容
<div id="mainPanle" region="center" style="background:#eee;padding:0px;overflow-y:hidden">
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div id="tabs-home" title="主页" iconCls="house" style="padding:20px;overflow:hidden;">
<br/><br/>
<h1=style="font-size:24px;"></h1>
</div>
</div>
</div>
大家可能感觉主体内容为什么为空呢？只是定义了一个div框了，这是由于主体内容是动态变化的，所以其采用动态加载的方式去生成。
以上就已经把主界面的原型给勾画出来了，大家以为结束了。但是其内容呢？比如说头部的设置功能都没有显示出来了。且听后回分析。
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
