简单实现邮件系统的界面功能

 

【文章标题】简单实现邮件系统的界面功能

【文章作者】曾健生

【作者邮箱】[e-mail]

【作者QQ】190678908

【作者博客】http://blog.csdn.net/newjueqi

【编程环境】Dreamweaver

【作者声明】欢迎转载文章，但转载请保留文章的完整性以及注明文章的出处。

 

*******************************************************************************

       邮件系统是个很常见的功能系统，本文主要模拟实现了其中界面功能的实现方法，最原始的界面如下图1：

                                                 图1

 

 

其中要实现的界面功能如下：

1．mail列表颜色间隔显示。

2．鼠标悬停行要有高亮效果。

3．实现全选复选框

4．“全选”按钮，“反选”按钮，“全部取消”按钮功能。

5．实现删除选中邮件功能。

 

下面对上面的功能分别实现如下：

 

一．    mail列表颜色间隔显示和鼠标悬停行要有高亮效果。

 

在DＯＭ中，把ＨＴＭＬ中的每个元素都封装成一个对象，其中表格也是一个对象table，table对象中有个rows集合，是table 对象的 tr (表格行)对象的集合，也就是所有的行对象，

通过遍历这个对象，我们可以得到每一行的对象，然后通过CSS样式表，分别改变奇数行和偶数行的颜色，就能实现mail列表颜色间隔显示。

       那现在又有一个问题：怎么方便地改变每一行的颜色，难道要访问一行就改变一行吗？答案是CSS样式表。在CSS中有三种常用的选择器，其中有一个是类选择器，可以让CSS样式表作用于具有相同类名的对象，只要通过javascript改变奇数行和偶数行的类名，使奇数行和偶数行分别拥有不同的样式表，就能方便地改变每一行的颜色。

       鼠标悬停行要有高亮效果的原理也很简单，我们知道鼠标悬停就是鼠标进入行的事件，我们只要在在鼠标进入事件处理函数中设置对行选择一个显示高亮效果的样式表，然后在鼠标移出事件处理函数中恢复原来的样式表，就能实现鼠标悬停高亮效果。

实现代码如下：

 

/*

1，mail列表颜色间隔显示。

2，鼠标悬停行要有高亮效果。

*/

var oldClassName; //记录原来的className，用于当鼠标移出后恢复原来的样式表

 

//1.设置表格的行间隔颜色

//2.鼠标移动到表格行后高亮显示

function showTableColor()

{

       //获取表格对象

       var tabObj = document.getElementsByTagName("table")[0];

 

       //获取所有的行对象

       var trArr = tabObj.rows;

      

       for( var x=1; x<trArr.length-1; x++ )

       {

              //通过改变类的名字来改变该行的样式

              if( x%2==0 )

              {

                     trArr[x].className="two";

              }

              else

              {

                     trArr[x].className="one";

              }    

             

              //鼠标进入表格行高亮

              trArr[x].onmouseenter =function()

              {

                     oldClassName=this.className;

                     this.className="over";

              }

             

              //鼠标离开表格行恢复原来的颜色

              trArr[x].onmouseleave =function()

              {

                     this.className=oldClassName;

              }                  

       }

      

       mail列表颜色间隔显示的效果如图2：

                                                 图2

 

鼠标悬停行高亮效果如图3:

                                                        图3

 

 

二．    实现全选复选框

全选的实现很简单，只需要获取列表中每一行的复选框对象，通过遍历的形式把全选复选框的选择状态赋给每一个复选框对象即可。

这里有个问题应该注意的，如果按了全选复选框后取消了某个复选框的选中状态，那么全选复选框就必须要重设为不选中，在这里本人用了一个比较简单的实现，当某个复选框的状态改变后就遍历一次所有复选框的状态，如果发现不全为选中，就把全选复选框的状态设置为不选中，否则就设置为选中。当然，这就要设置行对象的鼠标点击事件的响应函数了。

 

实现代码如下：

//“全选”复选框的功能实现

function checkAll( checkObj )

{

       var checkArr=document.getElementsByName( "mail" );

       for( var x=0; x<checkArr.length; x++ )

       {

              checkArr[x].checked=checkObj.checked;

       }

}

 

//网页加载时设置每个单选框的点击事件

function setCheckChick()

{

       var checkArr=document.getElementsByName( "mail" );

       for( var x=0; x<checkArr.length; x++ )

       {

              checkArr[x].onclick=ResetCheckBox;

       }

 

}

 

/*每个复选框状态改变后重置全选复选框的状态

*/

function ResetCheckBox()

{

 

       //复选框默认的状态

       var flag=true;

       //获取表格内容所有的复选框对象

       var checkArr=document.getElementsByName( "mail" );

      

       //获取表头的复选框对象

       var checkObj=document.getElementById( "checkid" );

      

       //遍历表格内所有的复选框

       for( var x=0; x<checkArr.length; x++ )

       {

              if( checkArr[x].checked==false )

              {

                     flag=false;

                     break;

              }

       }

      

       //根据标志重新设置表头复选框的状态

       if( true==flag )

       {

              checkObj.checked=true;

       }

       else

       {

              checkObj.checked=false;

       }

 

      

}

 

三．“全选”按钮，“反选”按钮，“全部取消”按钮功能。

“全选”按钮：把每个复选框设置为选中状态。

“反选”按钮：把每个复选框设置为非选中状态。

“全部取消”按钮：把每个复选框的状态取反。

 

由于以上三个按钮都是改变每个复选框的状态，只是改变的方式不同，所以可以把以上三个功能用一个函数实现，那究竟是哪个功能，就由传入的参数决定。

 

/*按下“全选”“取消”“反选”按钮后重置列表中复选框的状态

参数的三个值：

0：把每个复选框设置为不选中

1：把每个复选框设置为选中

2：把每个复选框的状态取反

*/

function checkSel( selPar )

{

       var checkArr=document.getElementsByName( "mail" );

 

       for( var x=0; x<checkArr.length; x++ )

       {

              //改变表格中复选框状态

              if( selPar==2 )

              {

                     checkArr[x].checked=!( checkArr[x].checked );

              }

              else

              {    

                     checkArr[x].checked=selPar;

              }           

       }

      

       //按下“全选”“取消”“反选”按钮后重置复选框的状态

       ResetCheckBox();

 

}

 

四．实现删除选中邮件功能

根据该行中的复选框是否选中决定是否删除该行。

 

表格中的对象有以下的层次关系：

 

 

Table

|--Tbody

       |--tr

              |--td：

|--复选框

              |--td： terttret

              |--td： terttret

|--td： terttret

 

 

从以上的层次关系可看出：Tbody是Table的一个子节点，Tbody是tr的父节点，td是复选框对象的父节点。

所以我们在获得了复选框对象后，就可以通过” 复选框对象。parentNode。parentNode”这个语句获取行对象，然后根据复选框的状态决定是否在tbody对象中是否删除该行。

实现的代码如下:

//删除列表中被选中的几项

function delMail()

{

       //获取所有的复选框对象

       var checkArr=document.getElementsByName( "mail" );

      

       //获取TBODY对象

       var tbodyObj=document.getElementsByTagName("table")[0].childNodes[0];

 

       //所有应该删除的行的集合

       var rowArray=new Array();

      

       var count=0;

       for( var x=0; x<checkArr.length; x++ )

       {

              if( checkArr[x].checked )

              {

                     //把应删除的行对象保存到数组中

                     rowArray[count++]=checkArr[x].parentNode.parentNode;

              }

       }

      

       //删除被选中的行

       for( var x=0; x<rowArray.length; x++ )

       {

              tbodyObj.removeChild( rowArray[x] );

       }

 

       //由于删除行后行数的奇偶性发生了变化，所以要重新设置一下每一行的颜色

       showTableColor();

      

}

 

选中要删除的邮件列表如图4：

                                                 图4

 

删除后的效果如图5：

                                                 图5

文章附件下载：http://newjueqi.ys168.com/