您的位置：首页 > 其它

Web端编写（四）——查看会议议程

2015-04-15 12:34 169 查看
老规矩，先上张效果图，这图我把弹出菜单弹出来了，弥补一下上篇博文没看到的效果。



这张图好像搞得大了点，将就用着吧。

讲讲如何实现，先上html的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Meeting.aspx.cs" Inherits="MeetingSys.Meeting" %>
<%@ Register TagName="WapTitle" TagPrefix="UC_Title" Src="AppUC/Title.ascx" %>
<%@ Register TagName="CopyRight" TagPrefix="UC_CopyRight" Src="AppUC/CopyRight.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-Control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="user-scalable=yes, width=device-width"/>
<title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\WapStyle.css"/>
<script type="text/javascript" src="..\Scripts\MeetingSys.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<UC_Title:WapTitle ID="TopTitle" runat="server" />
<div id="PopMenu">
<p onclick="GoMeetingFile('<%=Request.QueryString["ID"]%>')">查看会议文件</p>
<hr style="border:0;background-color:#777777;height:1px;margin: 0;padding:0;"/>
<p onclick="PopContact();">联系我们</p>
<p onclick="PopAbout();">关于系统</p>
</div>
<div id="Agenda">
<asp:Literal ID="lAgenda" runat="server"></asp:Literal>
<button class="button" type="button" onclick="GoMeetingFile('<%=Request.QueryString["ID"]%>')">查看会议文件</button>
<p></p>
</div>
<UC_CopyRight:CopyRight ID="CopyRightUC" runat="server" />
</div>
</form>
</body>
</html>这个页面太简单了，很多上篇博文都讲过了，挑没讲过的来讲
<p onclick="GoMeetingFile('<%=Request.QueryString["ID"]%>')">查看会议文件</p>

 <hr style="border:0;background-color:#777777;height:1px;margin: 0;padding:0;"/>

弹出菜单多了这两行，第一行是个JS函数，查看会议文件的，第二行是一条分隔线，图上可以看得很清楚。因为进入这个页面是有参数的，记得上篇博文讲到最后的JS函数不？把这个参数继续传递下去。

GoMeeting()的JS函数

//进入指定ID的会议文件列表，列出会议所有文件
function GoMeetingFile(MeetingID) {
window.location = "MeetingFile.aspx?ID=" + MeetingID;
}呵呵，知道下个页面的名称了吧
Agenda层，其实就是显示会议议程，弄个CSS美化一下，搞得像个APP的鸟样。

Agenda层样式

#Agenda
{
position:absolute;
width:96%;
left:2%;
right:2%;
top:3em;
background:#FFF;
border: 1px solid #444;
text-Align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 2px 2px 10px #909090;
}这个Agenda层里面有两元素，Literal和button，前者是显示议程用的，在后头加载，后者的click和菜单的click事件同一个就不多说了。
来，在后台把数据加上去，显示出议程来。

protected void Page_Load(object sender, EventArgs e)
{
TopTitle.sTitle = "会议议程";
string mID=Request.QueryString["ID"];
string sStr = MeetingOP.DataOP.GetAny("Meeting", "mAgenda", "ID", mID);
sStr = sStr.Replace("\r", "</p>");
sStr = sStr.Replace("\n", "<p>");
sStr = "<p>" + sStr + "</p>";
lAgenda.Text = sStr;
}从数据库中读取数据就不多说，讲讲处理数据，由于存放在数据库中的文本是用管理工具保存进去的，管理工具的文本编辑框可不会把回车换行变成html的换行，所以要把“\r”和“\n”换成P标签，问题来啦，P标签默认会使用1.5倍的行距，有点难看，而且不会自动缩进，所以干脆给它弄个样式，规定一下显示的效果。
#Agenda p
{
text-Align:left;
text-indent:2em;
}很奇怪的样式是不是，这个也是表示继承，简单来讲就是Agenda层里面p标签的样式，还有很多，如img、button等，继承层的样式，这是层里面html元素的样式。
好了，这个页面就那么简单，没有什么复杂的东西，就讲了个一个知识点，就是层里面html元素样式继承。

哦还有一点，上篇讲到default.aspx页面毕竟是系统自动生成的，这个可要手工建呀，在项目那里鼠标右键单击，弹出菜单中选择“添加->新建项”，弹窗中选择"Web 窗体"，把名称改为“Meeting.aspx”，当然，用其它名字也可以，记得把JS文件里面的跳转页面也改掉就行了。

这篇博文就到这里，下篇讲文件列表了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航