Hotmail 风格的 GridView 鼠标悬停和鼠标移出效果

• 下载源代码 - 6.53 KB

引言

如果您有 Hotmail Windows Live ID 电子邮件帐户，那么您已经观察到 收件箱 网格的行上的鼠标悬停和鼠标移开效果。在 收件箱 网格的任何行的鼠标悬停事件中，一个 CheckBox 会出现在 Image 的位置。 类似地，在鼠标移开事件中，一个 Image 会出现在 CheckBox 的位置。

有三种类型的图片出现在 CheckBox 的位置。如果消息未读，则会出现 Image。如果消息已读，则会出现 Image。 如果消息已被回复，则会出现 Image。

现在，如果我们选中因鼠标悬停事件而出现在行上的 CheckBox，则该行上的鼠标悬停和鼠标移开效果将被禁用。 如果我们取消选中该 CheckBox，则鼠标悬停和鼠标移开效果将再次开始对该行起作用。

现在，我将借助 GridView 控件展示此功能。在这个小应用程序中，我将只使用一个 Image，而不是使用所有三个图像。 在行的鼠标悬停事件中，将出现一个 CheckBox。 在鼠标移开事件中，将出现一个 Image。 如果我们选中 CheckBox，则该行上的鼠标悬停和鼠标移开效果将被禁用。 此外，在取消选中该 CheckBox 时，鼠标悬停和鼠标移开效果将再次开始对该行起作用。

我还在这个应用程序中实现了鼠标悬停和鼠标移开事件时 GridView 的行着色。

HTML 代码

在 GridView 中使用一个 TemplateField，并在 TemplateField 的 ItemTemplate 中放入一个 CheckBox 和一个 Image。 GridView 的 HTML 代码如下：

<asp:GridView ID="gvHotmail" runat="server" AutoGenerateColumns="False"
    OnRowDataBound="gvHotmail_RowDataBound">
            <Columns>
                <asp:BoundField HeaderText="n" DataField="n">
                    <HeaderStyle Width="50px" />
                    <ItemStyle Width="50px" />
                </asp:BoundField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <input id="chkBxMail" type="checkbox" runat="server" />
                        <asp:Image ID="imgMail" runat="server" ImageUrl="~/mail.png" />
                    </ItemTemplate>
                    <HeaderStyle Width="50px" />
                    <ItemStyle Width="50px" />
                </asp:TemplateField>
                <asp:BoundField HeaderText="n*n" DataField="nn">
                    <HeaderStyle Width="100px" />
                    <ItemStyle Width="100px" />
                </asp:BoundField>
            </Columns>
            <HeaderStyle Height="25px" BackColor="DarkOrange"
                HorizontalAlign="Center" VerticalAlign="Middle" />
            <RowStyle Height="25px" BackColor="NavajoWhite"
                HorizontalAlign="Center" VerticalAlign="Middle" />
            <AlternatingRowStyle Height="25px" BackColor="Gold"
                HorizontalAlign="Center" VerticalAlign="Middle" />
 </asp:GridView>

C# 代码

将以下代码放入 GridView 的 RowDataBound 事件中

if (e.Row.RowType == DataControlRowType.DataRow && (
    e.Row.RowState == DataControlRowState.Normal || e.Row.RowState ==
    DataControlRowState.Alternate))
        {
            HtmlInputCheckBox chkBxMail =
                (HtmlInputCheckBox)e.Row.Cells[1].FindControl("chkBxMail");
            Image imgMail = (Image)e.Row.Cells[1].FindControl("imgMail");

            e.Row.Attributes["onmouseover"] =
                string.Format("javascript:ItemMouseOver(this,'{0}','{1}');",
                chkBxMail.ClientID, imgMail.ClientID);
            e.Row.Attributes["onmouseout"] =
                string.Format("javascript:ItemMouseOut(this,'{0}','{1}');",
                chkBxMail.ClientID, imgMail.ClientID);

            chkBxMail.Attributes["style"] = "display:none;";
        } 

在上面的代码中，首先我确保行是 Normal 或 Alternate。 之后，我获取了 CheckBox 和 Image 控件的引用，并将客户端鼠标悬停和鼠标移开事件附加到它们。我还添加了一个 style [display:none;] 到 CheckBox 控件上，以便最初 CheckBox 不会出现。

JavaScript代码

将此 JavaScript 放在页面的 head 部分。

<script type="text/javascript">
    function ItemMouseOver(oRow, chkBxMail, imgMail)
    {
        oCheckBox = document.getElementById(chkBxMail);
        oImage = document.getElementById(imgMail);

        if(!oCheckBox.checked)
        {
            oCheckBox.style.display = '';
            oImage.style.display = 'none';
            oRow.originalBackgroundColor = oRow.style.backgroundColor
            oRow.style.backgroundColor = 'White';
        }
    }

    function ItemMouseOut(oRow, chkBxMail, imgMail)
    {
        oCheckBox = document.getElementById(chkBxMail);
        oImage = document.getElementById(imgMail);

        if(!oCheckBox.checked)
        {
            oCheckBox.style.display = 'none';
            oImage.style.display = '';
            oRow.style.backgroundColor = oRow.originalBackgroundColor;
        }
    }
</script>

在上面的脚本中，有两个函数： ItemMouseOver 和 ItemMouseOut。 ItemMouseOver 在鼠标悬停事件中调用，ItemMouseOut 在 GridView 行的鼠标移开事件中调用。 在 ItemMouseOver 函数中，CheckBox 出现，Image 消失。 在 ItemMouseOut 函数中，CheckBox 消失，Image 出现。 在两个函数中，出现/消失效果都会反映出来，前提是 CheckBox 未选中。我还分别在鼠标悬停和鼠标移开效果上使用了一些着色效果。

支持的浏览器

我已经在以下 浏览器 上测试了此脚本

历史

• 2008 年 1 月 30 日 -- 发布原始版本
• 2008 年 2 月 6 日 -- 文章已编辑
• 2008 年 3 月 5 日 -- 文章已更新