[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统三

来源：互联网发布：昆山人力资源软件编辑：程序博客网时间：2024/04/29 07:00

接上文，[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统二今天我给大家继续分享第三篇，主要讲解如何使用jQuery实现分页、已读/未读标记等功能。具体如下：
首先，我们先实现收件箱的列表页面如图：

如图，我们做简单分析，实现上述效果，当邮件比较多的时候肯定要实现分页功能，按页查看邮件，默认为第一页
所以我们要考虑到分页，那跟分页相关的几个参数我们这里也简单的分析下:
1)每页大小这里定义的是$pageSize 一个常量，本例定义为3，表示每页显示3条
2)当前页这里定义的是$nowPage 默认为1，表示第一页
3)总记录数这里我定义的是$w (在head.php中)
4)总页数这里我定义的是$maxPage 用于控制循环的终止条件，总页数等于 ceil(总记录数/每页大小) ceil()表示上去整

实现上述效果比较核心的是
1）登陆成功后默认的加载第一页数据
2）显示总邮件数和未读邮件数（本例在head.php中完成）
3）对于未读的邮件要显示为加粗效果，同时显示未读标记（主题前得‘小信封’）
4）点击上述未读标记，可以更新当前的信息状态

注意，因为网易整个页面使用了frameset的方法，将网页进行拆分，所以我必须也要把各个源码也给大家贴出来
head.php

Code:

<?php
session_start();
include '../include/dbconn.php';
//读取所有的邮件
$sql="select * from receiver where to_uid={$_SESSION['uid']} and is_del=0";
$rs=mysql_query($sql);
$w=0;
//总记录数
$total=0;
while($rows=mysql_fetch_assoc($rs)){
$total++;
if($rows['is_read']==0){
//读取所有的未读邮件
$w++;
}
}
$_SESSION['total']=$total;
$_SESSION['weidu']=$w;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="../css/globle_v1.css" type=text/css rel=stylesheet>
<link href="../css/skin_blue.css" rel="stylesheet" type="text/css" id="lnkSkin">
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY class=HeadBdWp>
<DIV class=HeadWp>
<DIV class=HeadThemeWp>
<DIV class=HeadWpInner>
<H1 class="Logo g163Logo"><A href="#" ><IMG
class=imgLogo src="../images/163logo.gif" border=0></A></H1><SPAN
class=UserInfo><B><?php echo $_SESSION['username']; ?></B> [ <A
href="index.php" target="_top">邮箱首页</A>，<A
href="#">换肤</A>，<A id=lnkLogout title=安全退出邮箱
href="loginout.php" target="_top">退出</A> ]</SPAN>
<FORM name=search
action=#
method=post><SPAN class=SearchBar><A class="SchMenuBtn fRi"
title=高级搜索
href="#"></A><INPUT class="SchBtn fRi" title=立即搜索 type=submit value="">
<INPUT class="Ipt fRi" maxLength=50 value=搜索邮件... name=keyword></SPAN></FORM><SPAN class=Extra><A
href="#">设置</A> | <A
href="#"
>帮助</A></SPAN>
<DIV class="InfoTips_Wp InfoTips_Scs" id=dvSuccessMsg style="DISPLAY: none">
<DIV class=InfoTips><B class="F1Img cnL"></B><SPAN class=Txt
id=spnSuccessText></SPAN><B class="F1Img cnR"></B></DIV></DIV>
<DIV class="InfoTips_Wp InfoTips_War" id=dvErrorMsg style="DISPLAY: none">
<DIV class=InfoTips><B class="F1Img cnL"></B><SPAN class=Txt
id=spnErrorText></SPAN><B
class="F1Img cnR"></B></DIV></DIV></DIV></DIV></DIV></BODY></HTML>

这里注意下，我是将当前查询出来的总邮件数和未读邮件数放到session中用于在left中和收件箱主页面显示（后来测试有点bug）
left.php

Code:

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="../css/globle_v1.css" type=text/css rel=stylesheet>
<link href="../css/skin_blue.css" rel="stylesheet" type="text/css" id="lnkSkin">
<DIV class=SidebarWp>
<DIV class=SidebarThemeWp>
<DIV class=SidebarWpInner>
<TABLE class=tbSB height="100%" cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TD class=tbSbTop>
<H1 class=BigBtnWp>
<A class=aShouXIN id=lnkInbox title=收信 href="#"></A>
<A class=aXieXIN title=写信 href="./sender/send.php" target="mainFrame" ></A>
</H1></TD></TR>
<TR>
<TD class=tbSbMid>
<DIV class=Sb_ConWp>
<DIV class=Sb_ConWpIn>
<DIV class="PanelWp Panel_Fld">
<DIV class=PanelCon id=dvSysFolder>
<UL id=ulSysFolder>
<LI class="Fld_Inbox New"><B class=icoFld></B><A class=fileItem id=lnk1
title=收件箱
href="main.php" target="mainFrame"
><SPAN class=JQ>收件箱(<?php echo $_SESSION['total']; ?>)</SPAN></A>
</LI>
<LI class=Fld_Drafts><B class=icoFld></B><A class=fileItem id=lnk2
title=草稿箱
href="#"
><SPAN class=JQ>草稿箱</SPAN></A>
</LI>
<LI class=Fld_Send><B class=icoFld></B>
<A class=fileItem id=lnk3 title=发件箱 href="./sender/sended.php" target="mainFrame" >
<SPAN class=JQ>发件箱</SPAN></A>
</LI>
<LI class=Fld_Trash><B class=icoFld></B><A class=fileItem id=lnk4
title=已删除
href="./deled/mail_deled.php"
target="mainFrame"><SPAN class=JQ>已删除</SPAN></A>
</LI>
<LI class=Fld_Spam><B class=icoFld></B><A class=fileItem id=lnk5
title=垃圾邮件
href="#"
><SPAN class=JQ>垃圾邮件</SPAN></A>
</LI>
<LI class=Fld_Adver><B class=icoFld></B><A class=fileItem id=lnk7
title=广告邮件
href="#"
><SPAN class=JQ>广告邮件</SPAN></A>
</LI></UL></DIV></DIV>
<DIV class=Sb_Line></DIV>
<DIV class="PanelWp Panel_Ftr">
<DIV class=PanelCon>
<UL>
<LI class=Fld_Addr><B class=icoFld></B><A class=fileItem id=lnkAddress
title=通讯录
href="#" ><SPAN class=JQ>通讯录</SPAN></A></LI>
<LI class=Fld_NetDisk><B class=icoFld></B><A class=fileItem
id=lnkNetFolder title=网易网盘
href="#" ><SPAN class=JQ>网易网盘</SPAN></A>
</LI></UL></DIV></DIV>
<DIV class=Sb_Line></DIV>
<DIV class="PanelWp Panel_PslFld">
<H2 class=PanelTT>
<A class="icoOpCls icoOpen" title=折叠 href="javascript:void(0)"></A>
<A class=TTxt title=进入文件夹管理页面 href="#"
>自定义文件夹</A> <SPAN class=Extra>[<A title=新建文件夹 href="javascript:void(0)">新建</A>]</SPAN></H2>
<DIV class="PanelCon PanelScl" id=dvDefinedFolder>
<UL id=ulDefFolder>
</UL></DIV></DIV>
</DIV></DIV>
</TD></TR></TBODY></TABLE></DIV></DIV></DIV>
</BODY></HTML>

这个页面left.php就是一个静态页面，没有什么好解释的。大家自己看就是了
下面就是最核心的文件了，事实上这个收件箱做好了，其他的发件箱或者已删除都是基于此改的。代码如下：

Code:

<?php
session_start();
//定义当前页
$nowPage=1;
//定义每页大小
$pageSize=3;
//计算总页数
$maxPage=ceil($_SESSION['total']/$pageSize);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>收件箱</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="../css/globle_v1.css" type=text/css rel=stylesheet>
<LINK href="../css/inbox.css" type=text/css rel=stylesheet>
<link href="../css/skin_blue.css" rel="stylesheet" type="text/css" id="lnkSkin">
<script type="text/javascript" src="../script/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//初始化页面
getPage(<?php echo $nowPage; ?>,<?php echo $pageSize; ?>);
//处理文字事件(全选、不选、未读、已读、反选)
//添加全选事件
$("A[type='all']").click(function(){
//遍历所有的checkbox，并且将所有的checkbox设置为选中状态
$("input:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//添加反选事件
$("A[type='reverse']").click(function(){
//遍历所有的checkbox，并且将所有的checkbox状态取反
$("input:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
//添加不选事件
$("A[type='no']").click(function(){
//遍历所有的checkbox，并且将所有的checkbox状态设置为false
$("input:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//添加未读事件
$("A[type='read']").click(function(){
//先设置所有的复选框为false
$("input:checkbox").each(function(){
$(this).attr("checked",false);
});
//遍历所有的checkbox，并且将所有的checkbox状态设置为true
$("td SPAN[class='icoIbx icoRead']").each(function(){
//找到已读邮件的checkbox所在的td
var inputtd=$(this).parent("div").parent("td").parent("tr").children("td");
//alert(inputtd);
inputtd.find("input").attr("checked",true);
});
});
//添加未读事件
$("A[type='unread']").click(function(){
//先设置所有的复选框为false
$("input:checkbox").each(function(){
$(this).attr("checked",false);
});
//遍历所有的checkbox，并且将所有的checkbox状态设置为true
$("td SPAN[class='icoIbx']").each(function(){
//找到未读邮件的checkbox所在的td
var inputtd=$(this).parent("div").parent("td").parent("tr").children("td");
//设置为选中状态
inputtd.find("input").attr("checked",true);
});
});
//添加删除事件
$("#btn_del").click(function(){
//提交表单
$("#form1").submit();
});
//添加删除事件
$("#btn_del2").click(function(){
//提交表单
$("#form1").submit();
});
});
/*
根据当前页和每页大小，查询数据库
*/
function getPage(nowpage,pagesize){
//显示第一页的数据
$.post("./receiver/rebox.php",{nowPage:nowpage,pageSize:pagesize},function(responseText,textStatus){
//ajax请求的回调函数的内容
DispTable(responseText);
});
}
//显示table的内容
function DispTable(restr){
//将json格式的字符串转换为对象
var obj=eval("("+restr+")");
//得到当前的页数;
var repage=parseInt(obj.repage);
var receobj=obj.datas;
//定义tr字符串;
var strtr="";
var trstyle="";
var dispread="";
for(var i=0;i<receobj.length;i++){
//判断是否整行加粗
if(receobj[i].is_read==0){
//设置整行是否加粗显示
trstyle="class='I_Mark0 I_UnRd'";
//设置是否显示未读图片
dispread="class='icoIbx'";
}else{
dispread="class='icoIbx icoRead'";
trstyle="class='I_Mark0'";
}
strtr+="<TR "+trstyle+" ><TD class=Ibx_Td_F> </TD><TD class=Ibx_Td_Chkbx><INPUT title=选择/不选 type=checkbox value='"+receobj[i].rid+"' name=rid[]></TD><TD class=Ibx_Td_icoInfo><div id='divflag'><SPAN "+dispread+" onClick='UpdateRead("+receobj[i].rid+",1)' title=未读(点击设为已读) type='markread'></SPAN></div></TD> <TD class=Ibx_Td_From title=''><A href='javascript:void(0)' onclick='getView("+receobj[i].mid+")'>"+receobj[i].from_name+"</A></TD><TD class=Ibx_Td_icoFlag title=未分类><B class=icoIbx></B></TD><TD class=Ibx_Td_Subject title=''><A href='javascript:void(0)' onclick='getView("+receobj[i].mid+")'>"+receobj[i].m_title+"</A></TD><TD class=Ibx_Td_Date title=''>"+receobj[i].r_time+"</TD><TD class=Ibx_Td_icoATCM></TD><TD class=Ibx_Td_Size><SPAN title='19,887 字节'>19 K</SPAN></TD></TR>";
}
//将拼装的字符串显示到tbody中
$("#rebox").html(strtr);
var pagestr="";
var pageSize=<?php echo $pageSize; ?>;
//修改上一页下一页
pagestr+=" <A onclick='getPage(1,"+pageSize+")'>首页</A> ";
if(repage!=1){
pagestr+="<A onClick='getPage("+(repage-1)+","+pageSize+")'>上页</A> ";
}
if(repage<<?php echo $maxPage; ?>){
pagestr+="<A href='javascript:void(0)' onClick='getPage("+(repage+1)+","+pageSize+")'>下页</A> ";
}
pagestr+="<A href='javascript:void(0)' onClick='getPage("+<?php echo $maxPage; ?>+","+pageSize+")'>末页</A>";
document.getElementById("pageSel").length=0;
//设置上面的下拉菜单
document.getElementById("pageSel1").length=0;
document.getElementById("pageSel").add(new Option("页码","页码"),null);
//设置上面的下拉菜单
document.getElementById("pageSel1").add(new Option("页码","页码"),null);
for(var j=1;j<=<?php echo $maxPage; ?>;j++){
//产生一个选项
var opt=new Option(j,j);
//将选项添加到下拉菜单中
document.getElementById("pageSel").add(opt,null);
//设置上面的下拉菜单
document.getElementById("pageSel1").add(opt,null);
}
$("SPAN[class*='pageNum']").html(pagestr);
}
</script>
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY class="All_C_Page Inbox">
<FORM id="form1"
action="./receiver/re_del.php"
method=post>
<INPUT id=oFormAction type=hidden>
<DIV class=ContentWp>
<DIV class=ContentThemeWp>
<DIV class=gTitle><B class=mTT>收件箱</B> (共 <B
id=oTotal><?php echo $_SESSION['total'];?></B> 封，其中 <A title=""
href="#">未读邮件</A> <B
class=fnt_Red id=oTotalUnRead><?php echo $_SESSION['weidu'];?></B> 封)</DIV>
<DIV class="gToolbar gTbrTop">
<INPUT id="btn_del" class="Btn BtnNml" hideFocus type=button value="删除" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move">
<INPUT class="Btn BtnNml" hideFocus type=button value=举报垃圾邮件 outClass="Btn BtnNml" overClass="Btn BtnHv" action="reportYes">
<SELECT class="Sel" name="sel_isread" onChange="UpdateRead(this.value,2)">
<OPTION value="2">标记为...</OPTION>
<OPTION value="1"> 已读邮件</OPTION>
<OPTION value="0"> 未读邮件</OPTION>
</SELECT>
<SELECT class=Sel action="move">
<OPTION value=none selected>移动到...</OPTION>
<OPTION value=2> 草稿箱</OPTION>
<OPTION value=3> 已发送</OPTION>
</SELECT>
<SELECT class=Sel action="view" url="#">
<OPTION value=none selected>查看...</OPTION>
<OPTION value=null> 全部邮件</OPTION>
<OPTION class=SelOptLine value=none>-------------</OPTION>
<OPTION value=read:false> 未读邮件</OPTION>
<OPTION value=read:true> 已读邮件</OPTION>
</SELECT>
<DIV style="position:absolute;right:20px; width:200px;">
<table width="100%">
<tr>
<td width="60%">
<SPAN class="pageNum">
</SPAN>
</td>
<td width="40%"> <SELECT
class=SelA id="pageSel1" style="MARGIN-RIGHT: 0px" onChange="getPage(this.value,<?php echo $pageSize; ?>)">
</SELECT></td>
</tr>
</table>
</DIV></DIV>
<DIV class=Ibx_Main_Wp>
<TABLE class="Ibx_gTable F2Img Ibx_gTable_TT" id=oTableHead>
<TBODY>
<TR>
<TH class=Ibx_Th_F></TH>
<TH class=Ibx_Th_Chkbx></TH>
<TH class=Ibx_Th_icoInfo><B class=icoIbx title=邮件类型></B></TH>
<TH class=Ibx_Th_From>发件人</TH>
<TH class=Ibx_Th_icoFlag><B class=icoIbx title=邮件标签></B></TH>
<TH class=Ibx_Th_Subject>主题</TH>
<TH class=Ibx_Th_Date>日期</TH>
<TH class=Ibx_Th_icoATCM><B class=icoIbx title=附件标识></B></TH>
<TH class=Ibx_Th_Size>大小</TH></TR>
<TBODY></TBODY></TABLE>
<DIV class="Ibx_Lst_dWp dWpOpen">
<TABLE class="Ibx_gTable Ibx_gTable_Con" id=oTableCOUNT0 action="list">
<TBODY id="rebox">
<!--如果是未读，则修改tr样式为 class="I_Mark0 I_UnRd" 否则的话
class="I_Mark0"
-->
<TBODY></TBODY></TABLE></DIV>
<H4 class=Ibx_Lst_bExtra id=oH4Check>选择：
<A type="all">全部</A> -
<A type=unread>未读</A> -
<A type=read>已读</A> -
<A type=reverse>反选</A> -
<A type=no>不选</A>
</H4></DIV>
<DIV class="gToolbar gTbrBtm">
<INPUT id="btn_del2" class="Btn BtnNml" hideFocus type=button value="删除" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move">
<INPUT class="Btn BtnNml" hideFocus type=button value=举报垃圾邮件 outClass="Btn BtnNml" overClass="Btn BtnHv" action="reportYes">
<SELECT class=Sel action="mark">
<OPTION value=none selected>标记为...</OPTION>
<OPTION value=read:true> 已读邮件</OPTION>
<OPTION value=read:false> 未读邮件</OPTION>
</SELECT>
<SELECT class=Sel action="move">
<OPTION value=none selected>移动到...</OPTION>
<OPTION value=2> 草稿箱</OPTION>
<OPTION value=3> 已发送</OPTION>
</SELECT>
<SELECT class=Sel action="view" url="#">
<OPTION value=none selected>查看...</OPTION>
<OPTION value=null> 全部邮件</OPTION>
<OPTION class=SelOptLine value=none>-------------</OPTION>
<OPTION value=read:false> 未读邮件</OPTION>
<OPTION value=read:true> 已读邮件</OPTION>
</SELECT>
<DIV style="position:absolute;right:20px; width:200px;">
<table width="100%">
<tr>
<td width="60%">
<SPAN class="pageNum">
</SPAN>
</td>
<td width="40%"> <SELECT
class=SelA id="pageSel" style="MARGIN-RIGHT: 0px" onChange="getPage(this.value,<?php echo $pageSize; ?>)">
</SELECT></td>
</tr>
</table>
</DIV>
</DIV></DIV></DIV></FORM>
</BODY></HTML>
<script language="javascript" type="text/javascript">
function UpdateRead(id,flag){
if(flag==1){
//根据id更新数据库
$.post('./UpdateRead.php',{id:id},function(responseText,textStatus){
//清空内容
$("#divflag").html("");
});
}else{
//重新设置form路径
$("#form1").attr("action","./UpdateRead.php");
$("#form1").submit();
}
}
function getView(mid){
window.open("./receiver/view.php?mid="+mid,"邮件详细","_blank");
}
</script>

   这个页面太多的功能了，比如：列表显示分页、分页、批量修改信息状态、删除功能、更新信息状态功能、查看邮件详细功能.....因为页面内容太多，当时写的时候也没有做特别大的优化，所以看着有点乱，但是相信大家仔细看一定会看明白的，注释加的也比较全，显示邮件列表的地方我使用了字符串的拼接，最后组成很多<tr><td>
      页面大量采用jQuery的ajax技术实现，列表的时候进行了无刷列表  更新邮件状态也是使用的无刷新技术

      现在将ajax的服务端页面贴出来，rebox.php

Code:

<?php
session_start();
include '../../include/dbconn.php';
//接受当前页
$nowPage=$_POST['nowPage'];
//接受每页的大小
$pageSize=$_POST['pageSize'];
//定义sql
$sql="select s.from_name,m.m_title,r.rid,r.mid,r.is_read,r.r_time,r.is_del,r.to_uid from sender s,message_info m,receiver r where s.mid=m.m_id and m.m_id=r.mid and r.is_del=0 and r.to_uid={$_SESSION['uid']} limit ".($nowPage-1)*$pageSize.",".$pageSize;
//执行查询
$rs=mysql_query($sql);
while($row=mysql_fetch_assoc($rs)){
//生成二维数组
$arr[]=$row;
}
$arr2=array("repage"=>$nowPage,"datas"=>$arr);
echo json_encode($arr2);
?>

更新邮件状态的updateRead.php

Code:

<?php
include '../include/dbconn.php';
$rid=$_POST['rid'];
$sel_isread=$_POST['sel_isread'];
if(isset($_POST['id'])){
//处理已读操作
$sql="update receiver set is_read=1 where rid={$_POST['id']}";
$rs=mysql_query($sql);
}else{
foreach($rid as $dd){
//批量处理已读或者未读
$rs+=mysql_query("update receiver set is_read=".$sel_isread." where rid=".$dd);
}
}
if($rs>0){
//跳转到收件箱主页面
header("location:./success.php?forward=main.php&info=4&num=".$rs);
}
?>

header("location:./success.php?forward=main.php&info=4&num=".$rs); 表示当执行成功后，把执行的结果和提示信息的编号传递到success.php 进行弹出窗口提示

原创地址:[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统二

原创地址:[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统三