MoverMenu:显示附加信息的面板

HoverMenu扩展器控件可以对任何的ASP.NET服务器端控件进行扩展，当用户将鼠标移至目标控件之上时，目标控件旁将自动弹出一个面板，该面板中可以用来显示某些附加内容、相关操作等信息。
示例运行效果：

图(1)

图(2)

图(3)

BlogEntry.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

/**/ /// <summary>
/// BlogEntry 的摘要说明
/// </summary>
public   class  BlogEntry
... {
    private int m_id;

    public int Id
    ...{
        get 
        ...{
            return m_id;
        }
        set 
        ...{
            m_id = value;
        }
    }

    private string m_title;

    public string Title
    ...{
        get
        ...{
            return m_title;
        }
        set
        ...{
            m_title = value;
        }
    }

    private bool m_isActive;

    public bool IsActive
    ...{
        get
        ...{
            return m_isActive;
        }

        set
        ...{
            m_isActive = value;
        }
    }

    private int m_webViews;

    public int WebViews
    ...{
        get
        ...{
            return m_webViews;
        }
        set
        ...{
            m_webViews = value;
        }
    }

    private int m_aggViews;

    public int AggViews
    ...{
        get
        ...{
            return m_aggViews;
        }
        set
        ...{
            m_aggViews = value;
        }
    }

    public BlogEntry()
    ...{
    }

    public BlogEntry(int id, string title, bool isActive, int webViews, int aggViews)
    ...{
        m_id = id;
        m_title = title;
        m_isActive = isActive;
        m_webViews = webViews;
        m_aggViews = aggViews;
    }

}

BlogDataService.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Collections.Generic;

/**/ /// <summary>
/// BlogDataService 的摘要说明
/// </summary>
public   class  BlogDataService
... {
    private static List<BlogEntry> m_data;

    private static void initData()
    ...{
        m_data = new List<BlogEntry>();

        Random r = new Random();

        for (int i = 0; i < 10; ++i)
        ...{
            m_data.Add(
                    new BlogEntry(
                        i,
                        string.Format("This is a looooooooooooooong title for Blog entry #{0}",i),
                        r.Next(2) == 1,
                        r.Next(1000),
                        r.Next(1000)
                    )
                );
        }
    }

    public static List<BlogEntry> GetBlogEntries()
    ...{
        if (m_data == null)
        ...{
            initData();
        }
        return m_data;
    }
}

HoverMenuDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="HoverMenuDemo.aspx.cs" Inherits="Chapter08_HoverMenuDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > HoverMenu Demo </ title >
     < link  href ="StyleSheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        .gridRow,.gridRowHover
        {...}{
            padding:3px;
        }
        .gridRowHover,.popupPanel
        {...}{
            background-color:#F5F7F8;
        }
        .popupPanel
        {...}{
            border:1px solid #ccc;
            padding:5px;
            width:130px;
        }
     </ style >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < asp:GridView  ID ="blogEntryGrid"  runat ="server"  AutoGenerateColumns ="False"  
            DataSourceID ="blogDataSource"  Width ="335px"  BackColor ="Azure" >
             < Columns >
                 < asp:TemplateField  HeaderText ="Title" >
                     < ItemTemplate >
                         < asp:Panel  ID ="gridRow"  CssClass ="gridRow"  runat ="server" >
                             < asp:Label  ID ="lbTitle"  runat ="server"  Text ='<%#  Bind("Title") % > '>'> </ asp:Label ></ asp:Panel >
                         < asp:Panel  ID ="popupPanel"  CssClass ="popupPanel"  style ="visibility:hidden;"  runat ="server" >
                            ID:
                             < asp:Label  ID ="lbId"  runat ="server"  Text ='<%#  Bind("Id") % > '> </ asp:Label >< br  />
                            Active:
                             < asp:Label  ID ="lbIsActive"  runat ="server"  Text ='<%#  Bind("IsActive") % > '> </ asp:Label >< br  />
                            Agg Views:
                             < asp:Label  ID ="lbAggViews"  runat ="server"  Text ='<%#  Bind("AggViews") % > '> </ asp:Label >< br  />
                            Web Views:
                             < asp:Label  ID ="lbWebViews"  runat ="server"  Text ='<%#  Bind("WebViews") % > '> </ asp:Label >< br  />
                             < hr  />
                             < asp:LinkButton  ID ="lbtnEdit"  runat ="server"  CausesValidation ="false"  CommandName ="Edit"
                                Text ="Edit" ></ asp:LinkButton >
                             < asp:LinkButton  ID ="lbtnDelete"  runat ="server"  CausesValidation ="false"  CommandName ="Delete"
                                Text ="Delete" ></ asp:LinkButton >
                             < asp:LinkButton  ID ="lbtnViewReferrals"  runat ="server"  CausesValidation ="false"  CommandName ="ViewReferrals"
                                Text ="ViewReferrals" ></ asp:LinkButton >
                            
                             < ajaxToolkit:HoverMenuExtender  ID ="hme"  runat ="server"
                                TargetControlID ="gridRow"
                                HoverCssClass ="gridRowHover"
                                PopupControlID ="popupPanel"
                                PopupPosition ="Right"
                                PopDelay ="20"
                                OffsetY ="-20"   />
                             <!--
                                TargetControlID：该扩展器目标控件ID。当鼠标悬停于该属性所指定的控件上时，将弹出PopupControlID属性
                                                 值所指定的浮动面板
                                HoverCssClass：当鼠标悬停于目标控件之上时，应用到目标控件之上的附加CSS Class的名称。指定这个属性
                                               有助于让用户更加清晰地看到弹出面板和目标控件的关系。
                                PopupControlID：弹出的悬浮Panel控件的ID。当鼠标悬停于目标控件之上时，由该属性指定的Panel控件将显
                                                示出来。
                                PopupPosition：弹出的悬浮Panel控件相对于目标控件的位置，可选Left、Right、Top、Bottom和Center，分别
                                               代表左、右、上、下和居中
                                OffsetX：在PopupPosition属性所指定的位置上弹出的悬浮Panel控件在x方向的偏移量，单位为像素(px)。
                                OffsetY：在PopupPosition属性所指定的位置上弹出的悬浮Panel控件在y方向的偏移量，单位为像素(px)。
                                PopDelay：从鼠标移入目标控件到弹出悬浮面板之间的时间延迟。将该属性设置为一个合理值，可以避免用户大
                                          大范围异动鼠标时扫过大量目标控件，进而频繁地弹出悬浮菜单所带来的对客户端执行效率的影响。
                             -->
                            
                             < ajaxToolkit:DropShadowExtender  ID ="dse"  runat ="server"
                                TargetControlID ="popupPanel"
                                TrackPosition ="true"
                                Opacity ="0.5"   />
                                
                         </ asp:Panel >
                     </ ItemTemplate >
                 </ asp:TemplateField >
             </ Columns >
         </ asp:GridView >
        
         < asp:ObjectDataSource  ID ="blogDataSource"  runat ="server"  SelectMethod ="GetBlogEntries"
            TypeName ="BlogDataService" >
         </ asp:ObjectDataSource >
     </ form >
</ body >
</ html >