接上文,[原创+源码]超强:基于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 |
- <?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
- <?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">
- <!-- 标题部分 -->
- <!-- 折叠时把icoOpen换成icoCls -->
- <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就是一个静态页面,没有什么好解释的。大家自己看就是了
下面就是最核心的文件了,事实上这个收件箱做好了,其他的发件箱或者已删除都是基于此改的。代码如下:
- <?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)' οnclick='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)' οnclick='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 οnclick='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><!-- Surj 2008.08.08 list.js -->
- </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
- <?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
- <?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 进行弹出窗口提示