js+ asp.Net ajax开发163邮箱效果（列表底色、多选拖动等)列表底色随鼠标移动变化

这个月很忙
一直没有时间记点东西
把上个项目中(asp.Net )
模仿163邮箱邮件列表相关效果放出来
和大家交流一下
包括 邮件底色变化、checkBox相关、拖放邮件至不同文件夹实现分配等等

很多也是来自网上的技巧
有的实现也比较veak 希望大家指正

邮件底色：
163邮箱原始效果如下图，鼠标所在行底色变化，从而提高可读性
其实这个很普遍，在Andy Budd的《css mastery》中就有提到实现


在FF中可以在CSS里用TR元素的hover来实现
而对于IE，可以通过js中添加TR元素的mouseover、mouseOut来实现

另外，对于已经check的邮件，鼠标再移上去是不会变色的


好了，下面就代码说明我是怎样实现这个效果的
js如下：

var color1 = "#fff58f";  //选中颜色
var color2 = "#afddff";  //移动颜色
var color3 = "";    //初始色
function mov(obj) 
{
    if (obj.getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').length>0 && obj.getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').item(0).checked == true){
    
        obj.style.background=color1;           
        return; 
    }
    else
    {
        obj.style.background=color2;       
    }    
             
} 
function mou(obj,originalColor) 
{  
    if (obj.getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').length>0 && obj.getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').item(0).checked == true)
        return; 
    else if(originalColor ==null)
      obj.style.background=color3;   
    else
       obj.style.background=originalColor;           
} 

上面对于INPUT的判断是用于检测是否是选中行

在asp.Net中，主要是以GridView来呈现表格数据
而且，GridView通常都会应用AlternatingRowStyle交替行样式，
需要对163的样式进行一些扩展，以允许交替行鼠标移开后恢复原来的交替颜色，
方法就是在mouseout事件中把当前rowStyle的底色传递进去
需要注意的是存在一个从System.Color到HtmlColor的转换

    protected void grvProjList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {           
            if ((e.Row.RowIndex % 2) == 0)
            {
                e.Row.Attributes.Add("onmouseout", "mou(this,'" + System.Drawing.ColorTranslator.ToHtml(grvProjList.RowStyle.BackColor) + "')");
            }
            else
            {
                e.Row.Attributes.Add("onmouseout", "mou(this,'" + System.Drawing.ColorTranslator.ToHtml(grvProjList.AlternatingRowStyle.BackColor) + "')");
            }

            e.Row.Attributes.Add("onmouseover", "mov(this)");        
           
            e.Row.Attributes["style"] = "Cursor:hand";
        }
    }

好了，把上面的代码加入你的GridView,并且确保第一列是个CheckBox列
就能看到选中的效果了