您的位置：首页 > 产品设计 > UI/UE

easyui主界面生成分析1

2016-03-02 22:07 351 查看
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框了，这是由于主体内容是动态变化的，所以其采用动态加载的方式去生成。

以上就已经把主界面的原型给勾画出来了，大家以为结束了。但是其内容呢？比如说头部的设置功能都没有显示出来了。且听后回分析。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航