Web端编写（二）——用户控件和首页1

于 2015-04-15 09:31:57 发布
阅读量506 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： c# 会议系统 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hzfire/article/details/45054807

先看看首页的截图，这是华为荣耀×1的截图，就是要达到这样的效果。


这就是安卓webview展示的效果。

其实这是web站点default.aspx展示的效果，看图就可以看出页面共分三部分，顶部标题栏、中间是内容区域、底部是版权声明。

重点要关注的是前面两部分，版权声明可以不要的。

标题栏，就是蓝色那部分，共由3部分组成，最左边的是个刷新按钮，最右边的其实是个弹出菜单，中间是标题文字。

内容区域，列出所有会议，由于是设计调试阶段，懒得弄更多的数据，筛选时就列出所有会议了，最终版本要加上筛选条件的。

下面来一步一步实现这样的功能。

本项目使用的web页面布局基本都是基于CSS和层来控制，CSS只考虑webkit核心的浏览器，所有页面点击基本都是通过JS来控制。为方便集中控制，CSS基本都写在同一个文件，JS除非特别需要，否则也写在同一个文件。CSS文件保存在项目目录Style文件夹中，文件名“WapStyle.css”，JS文件保存在Scripts文件夹中，文件名为MeetingSys.js，还有些图片，如刷新按钮和菜单按钮，其实是图片来的，要提前做好，最好是使用png格式的。

标题栏：由于标题栏是所有页面共性的，所以我把它做成了用户控件，每个页面都弄它进去，但标题栏也有个性部分，如标题文字和弹出菜单，所以也要留着部分放在各页面来搞。

版权声明栏：就是页面右下方那行很小的字的，我蛋疼加上去的，就显示一样文字而已，添加方法就不多说了，和标题栏一样的。

重点讲讲标题栏，上文讲到到它既有共性的东西也有个性的东西，就看如何平衡了。既然它有共性的东西，做成控件是最好用的。

先在项目中新建一个文件夹，文件夹名为“AppUC”，名字随个人喜好，用的时候记得就行了。在这个文件夹处用鼠标右键单击，在弹出菜单中选择“添加->新建项”，弹窗中选择“Web 用户控件”，把名称改为“Title.ascx”，这个不多说了，名字我用这个，后面所有操作都是用这个名字，后面博文也不会再说这点了。

双击打开“Title.ascx”，出现的是web页面设计界面，其中第一行代码如果不是对C#非常熟悉绝对不能修改，否则出错起来会很头痛的。接下来就开始设计标题栏啦。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Title.ascx.cs" Inherits="MeetingSys.AppUC.Title" %>
<div id="Mask"></div>
<div id="TitleBar">
	    <div id="Refresh" onclick="Refresh()"><img style="width:40px;height:40px;" src="..\WebImg\btn_Refresh.png" alt="" /></div>
	    <div id="TopMenu" onclick="PopMenu()"><img style="width:40px;height:40px;" src="..\WebImg\btn_popmenu.png" alt="" /></div>
            <div id="Title"><asp:Literal ID="TitleTrip" runat="server"/></div>
</div>
<div id="ContactDiv">
	<p><b>联系我们</b></p>
	<ul>
	    <li>QQ:524119，随便写点东西</li>
	    <li>微信：524119，随便写点东西</li>
	    <li>没东西可写了，不过是演示一下li的用法而已</li>
	</ul>
	<p><button class="button" type="button" onclick="CloseContact();">确定</button></p>
</div>
<div id="AboutDiv">
	<p><b>关于系统</b></p>
	<ul>
	    <li>服务端版本：1.0</li>
	    <li>管理器版本：1.0</li>
	    <li>平板端版本：1.0</li>
	    <li>本系统仅供惠州市×××单位使用，其余单位和个人可随意拷贝使用，未经许可，不得随意更改源代码及修改版权声明。</li>	
	</ul>
	<p><button class="button" type="button" onclick="CloseAbout();">确定</button></p>
</div>
讲讲上面的代码，看到很多div标签了吧，以前我喜欢用表格来做布局，但针对平板来浏览，表格布局的限制就很大了，远不如div+css来玩的效果好。

Mask层，这个是个蛋疼层，看名字就知道了，是个遮罩层，专门针对弹窗使用的，由于webview对alert支持很差，在需要弹窗显示信息时经常失效的，干脆我就写了个动态层，代替alert使用，这个Mask层就是用来限制背景页面操作使用的，同时把背景页面的透明度降低。这个功能通过CSS和JS来实现。

Mask的CSS代码，写在WapStyle.css里面，老实说，这个代码大部分是抄自网上，自己组合起来，有部分代码是多余的，懒得删。

#Mask
{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #AAAAAA;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
    }
CSS文件的格式不多说，自己去网上可以搜出一图书馆的教程，简单讲一下，实用“#”开头加ID，表示这是针对指定ID标签实用的样式。display:none;表示初始时这个层不显示，position: absolute;表示实用绝对定位，后面的一看就懂，z-index:1001;这个表示层冲突时优先级，数字越大的覆盖数字小的。最后3行是针对不同浏览器设置透明度的，webkit其实只需要倒数第二行的。

讲到遮罩层，就鼠标讲讲弹窗层，需要动态创建一个层，用于显示弹信息，所以我就弄了个JS函数，代替alert。

//弹窗信息，取代alert
function PopAlert(Title, Content) {
    document.getElementById("Mask").style.display = "block";
    var AlertDiv = document.createElement("DIV");
    AlertDiv.id = "AlertBody";
    var InnerStr = "";
    InnerStr += "<p style=\"background:#058BB0;text-align:left;margin-Top:0;padding-left:20px;font-weight:bold;height:25px;line-height:25px;\">" + Title + "</p>\n";
    InnerStr += "<p style=\"background:#fff;text-align:center;font-size:1em;height:120px;line-height:120px;\">" + Content + "</p>\n";
    InnerStr += "<p style=\"position:absolute;bottom:0;width:100%;\"><input class=\"button\" type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk();\"/></p>\n";
    AlertDiv.innerHTML = InnerStr;
    document.body.appendChild(AlertDiv);
    this.doOk = function () {
        document.body.removeChild(AlertDiv);
        document.getElementById("Mask").style.display = "none";
    }
}
上面那个函数可以看到，第一步就是把Mask层的display改成了block，激活Mask层，然后创建一个ID为“AlertBody”的层，然后添加这个层显示的元素。注意，其中添加一个ID为“do_OK”的按钮，其样式用的是class=“button”，这是样式表的另一种用法，叫类，表示是公用样式表，button这个元素会用到很多，所以设计一个公用的样式表。这里有两个元素使用到样式表，所以继续添加两个样式表。

AlertBody的样式

#AlertBody
{
    position:absolute;  
    left:50%;  
    top:0%;  
    margin-Left:-225px;  
    margin-Top:225px;  
    width:450px;  
    height:250px;  
    background:#FFF;  
    border: 1px solid #444;
    text-Align:center;
    -webkit-box-shadow: 2px 2px 10px #909090; 
    z-Index :1002;
    }
注意看，这里的z-index刚好比遮罩层Mask大一点，这样弹窗就在遮罩层上方了。-webkit-box-shadow: 2px 2px 10px #909090;这个是针对webkit核心的浏览器的，对层进行画阴影，在IE里面是没有效果的。
button样式 

.button
{
    color: #d9eef7;  
    border: solid 1px #0076a3;  
    background: #0095cd;  
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));  
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }
这里样式是以“.”开头的，表示这是样式类，使用时用class="样式类名"这种方式，样式表冲突时优先级请自行百度之。

Mask层讲完了，接下来讲TitleBar层，这是整个标题栏层，层里面的其它元素层是嵌套在它里面的，整个层是共性的。

#TitleBar
{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#39BFE4), to(#058BB0));
    margin: 0;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    width:100%;
    height:40px;
    background-color: #ccc;
    position:fixed;
    }
TitleBar层共嵌套有3个层，分别是Refresh、TopMenu和Title，代表最左边的刷新按钮、最右边的菜单按钮和中间的标题栏，这三个层在html代码中顺序必须按这顺序，绝对不能更改，否则会错乱的。

Refresh、TopMenu样式表其实都一样的，里面都放置了一个img，注意img的样式，由于很简单，就不写入样式表文件了，直接在代码中写了。两个图片都是PNG格式的，效果图中白色部分是用PS画的，非白色部分一律用透明，这样才可以显示背景色，自己试验一下就知道了。

Refresh样式表

#Refresh
{
    width:40px;
    height:40px;
    display: block;
    border-right: 1px solid #666;
    float:left;
    }
TopMenu样式表 

#TopMenu
{
    width:40px;
    height:40px;
    display: block;
    border-left: 1px solid #666;
    float:right;
    }

这两样式表看看width和height的值，对应img的样式中这两的值，要保证一致，否则会撑开页面的。

Title样式表

#Title
{
    margin:auto;
    height:40px;
    line-height:40px;
    color: #FFF;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 1px #888;
    }
Refresh层和TopMenu层还有onclick的JS函数，分别是刷新网页和弹出出单

Refresh()的JS函数

//刷新当前页面
function Refresh() {
    location.reload(true);
}

用的是reload方法，这样可以刷新所有数据，会清除缓存的。

PopMenu()的JS函数 

//弹出菜单层
function PopMenu() {
    if (document.getElementById("PopMenu").style.display == "none")
        document.getElementById("PopMenu").style.display = "block";
    else
        document.getElementById("PopMenu").style.display = "none";
}
菜单层PopMenu写在各页面，因为每个页面弹出菜单都不一样，这个层到讲页面的时候再讲。
下面讲一下Title里面的Literal元素，这是一个服务器控件，在服务端执行的，解释完后在浏览器就是显示为span元素，这是用于显示标题文字的，这是个性的，每个页面显示的的内容不一样，所以要先构造一个属性值，好让调用的网页把值传过来显示。

双击打开Title.ascx.cs文件，这个就是页面代码文件啦，这里面的代码就是在服务端执行的代码。

public string sTitle
        {
            get { return this.TitleTrip.Text; }
            set { this.TitleTrip.Text = value; }
        }
在Page_Load上方添加这三行代码，就可以把值传递过来显示在标题里面了，具体应用方法讲到页面的时候再讲。

下面两个层ContactDiv和AboutDiv就是个弹窗层，其实是菜单里面的两个菜单层，我用来显摆用的。

要注意的是布局方法用到层、ul、和li，这个用来控制显示相同内容的标签，详细使用方法可以百度之

ContactDiv的样式表，注意样式表的继承方式

#ContactDiv
{
    position:absolute;  
    left:10%;  
    top:0%;  
	padding:0px;
    margin-Left:0;  
    margin-Top:225px;  
    width:80%;  
    height:auto;  
    background:#FFF;  
	border: 1px solid #444;
    text-Align:center;
	-moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px #909090; 
    z-Index :1002; 
    display:none;
    }
#ContactDiv ul
{
    list-style:none;
    margin:0px;
    padding:0px;
    width:100%;
    }
#ContactDiv ul li
{
    padding-left:1em;
    padding-right:1em;
    text-indent:2em;
    font-size:1em;
    text-align:left;
    }
AboutDiv的样式 

#AboutDiv
{
    position:absolute;  
    left:10%;  
    top:0%;  
	padding:0px;
    margin-Left:0;  
    margin-Top:225px;  
    width:80%;  
    height:auto;  
    background:#FFF;  
	border: 1px solid #444;
    text-Align:center;
	-moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px #909090; 
    z-Index :1002; 
    display:none;
    }
#AboutDiv ul
{
    list-style:none;
    margin:0px;
    padding:0px;
    width:100%;
    }
#AboutDiv ul li
{
    padding-left:1em;
    padding-right:1em;
    text-indent:2em;
    font-size:1em;
    text-align:left;
    }
CloseContact()的JS函数 

//关闭联系我们层
function CloseContact() {
    document.getElementById("Mask").style.display = "none";
    document.getElementById("ContactDiv").style.display = "none";
}
CloseAbout()的JS函数 

//关闭关于系统层
function CloseAbout() {
    document.getElementById("Mask").style.display = "none";
    document.getElementById("AboutDiv").style.display = "none";
}
这里只讲到关闭这两个层，没讲到如何打开这两层，因为还没到打开的时候，看样式表就知道啦，一开始就是隐藏的。到指定页面打开菜单的时候会讲到如何打开的。

这篇博文好像太长了，没办法讲首页了，下篇再讲吧，包括引用这个用户控件。












评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值