您的位置：首页 > 运维架构 > 网站架构

BS架构ERP系统开发全系列之白金教程－主界面设计

2015-12-26 15:26 597 查看
１、打开VS2012

新建ERP专案，如图





在ERP解决方案上，右击添加新建项目，新建一个CommonTools共用类库，如图



删除Class1.cs，在CommonTools右击，添加新建类，输入BasePage，结果如图





在ERP专案上右击，打开ERP专案所在文件夹，如下图

添加４个文件夹（ＷＳ存放WebService），如图



将上一章所介绍的js类库全部下载到js文件夹，如图



在解决方案上单击显示所有文件



选中添加的的４个文件夹，右击，包在项目中

在CommonTools上添加System.Web引用

打开BasePage文件，代码修改如下

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace CommonTools
{
public class BasePage : Page
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);

AddCss(this.Page, "~/js/JqueryEasyUI/themes/default/easyui.css");
AddCss(this.Page, "~/js/JqueryEasyUI/themes/icon.css");
AddCss(this.Page, "~/js/My97DatePicker/skin/WdatePicker.css");
AddScript(this.Page, "~/js/JqueryEasyUI/jquery.min.js");
AddScript(this.Page, "~/js/jquery-ui/jquery-ui.min.js");
AddScript(this.Page, "~/js/JqueryEasyUI/jquery.easyui.min.js");
AddScript(this.Page, "~/js/JqueryEasyUI/locale/easyui-lang-zh_CN.js");
AddCss(this.Page, "~/js/jquery-ui/themes/redmond/jquery-ui.css");
AddCss(this.Page, "~/css/ui.jqgrid.css");
AddScript(this.Page, "~/js/jqGrid/i18n/grid.locale-cn.js");
AddScript(this.Page, "~/js/jqGrid/jquery.jqGrid.min.js");
AddScript(this.Page, "~/js/jqGrid/jqGridExportToExcel.js");
AddScript(this.Page, "~/js/My97DatePicker/WdatePicker.js");
AddScript(this.Page, "~/js/JqueryEasyUI/plugins/jquery.my97.js");
}
public static void AddScript(System.Web.UI.Page page, string url)
{
HtmlGenericControl JsControl = new HtmlGenericControl("script");
JsControl.Attributes.Add("type", "text/javascript");
JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
page.Header.Controls.Add(JsControl);
}
public static void AddEndScript(System.Web.UI.Page page, string url)
{
HtmlGenericControl JsControl = new HtmlGenericControl("script");
JsControl.Attributes.Add("type", "text/javascript");
JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
page.Controls.Add(JsControl);
}
public static void AddCss(System.Web.UI.Page page, string url)
{
HtmlLink CssControl = new HtmlLink();
CssControl.Href = url;
CssControl.Attributes.Add("rel", "stylesheet");
CssControl.Attributes.Add("type", "text/css");
page.Header.Controls.Add(CssControl);
}
}
}
在ＥＲＰ上右击，添加CommonTools引用



ＥＲＰ专案上右击，添加web窗体，命名为



Index页面，按F7，切换到.cs页面，将页面继承basepage，如图



再按F7切换到.aspx页面视图

添加代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>唯准电子企业管理系统</title>
</head>
<body class="easyui-layout">
<form id="form1" runat="server">
<div id="top" data-options="region:'north',border:false,height:0">
<div id="logo">
<div id="menu">
<ul>
<asp:Label ID="topMenu" runat="server"></asp:Label>
<li>
<asp:LinkButton ID="lbnLogout" runat="server"><span>登出</span></asp:LinkButton>
</li>
</ul>
</div>
<div id="SubMenu">
<div>部门：<asp:Label ID="lblUnitName" runat="server" Text="资讯部"></asp:Label></div>
<div>姓名：<asp:Label ID="lblHumanName" runat="server" Text="满赛"></asp:Label></div>
</div>
</div>
</div>
<div id="IndexTree" data-options="region:'west',split:true" title="ERP系统" style="width: 160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
</div>
</div>
<div data-options="region:'center',title:'操作窗口'">
<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="工作台">
<iframe src='' frameborder="0" scrolling="auto" style="width: 100%; height: 99.5%"></iframe>
</div>
</div>
</div>
</form>
</body>
</html>
修改顶部的li标签css样式变为横向

#top {
BACKGROUND: url(../images/topbg.gif) repeat-x;FONT-SIZE: 12px;OVERFLOW: hidden;
}
#logo {
BACKGROUND: url(../images/logo.gif) no-repeat; float :left; height :72px; OVERFLOW: hidden;
}
#menu{HEIGHT: 48px;OVERFLOW: hidden;}
#logo ul{padding:5px 0 0 460px;list-style:none;}
#logo ul li{float:left;HEIGHT: 30px;border:solid 1px #d4e4f3;}
#logo ul li a {
DISPLAY: block; BACKGROUND: url(../images/digital_left.gif) no-repeat left top;COLOR: #2867b1;FLOAT: left;HEIGHT: 30px; LINE-HEIGHT: 20px; TEXT-DECORATION: none;OVERFLOW: hidden;
}
#logo ul li a SPAN {
DISPLAY: block;FONT-WEIGHT: bold; BACKGROUND: url(../images/digital_side.gif) no-repeat right top;padding:7px 13px 0 13px;  FLOAT: left; CURSOR: pointer;OVERFLOW: hidden;HEIGHT: 30px;
}
#logo ul li a:hover{
background:url(../images/seg_left.gif) no-repeat left top;COLOR: #fff;
}
#logo ul li a:hover SPAN
{
background:url(../images/seg_side.gif) no-repeat right top;
}
#SubMenu {
MARGIN-LEFT: 460px;COLOR: #fff;FONT-WEIGHT: bold; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: left;
}
#SubMenu div{
float:left;width:200px;
}
#TreeView1 a:link,a:visited {text-decoration:none; color:#126499;}
#TreeView1 a:hover,a:active {text-decoration:underline; color:#126499;}
#TreeView1 tr:hover {
background-color:#e6e6e6;
}
.easyui-tree,.easyui-tree .tree-node-selected,.easyui-tree span:hover {
color:#126499
}
至此主页面已经做完，在浏览器中查看即可，看到如下效果页面（建议用google chrome）



QQ：25489181

邮箱：mansai@163.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航