MoverMenu:显示附加信息的面板-优快云博客

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1650050

本文介绍 ASP.NET 中 HoverMenu 扩展器控件的应用，演示了当鼠标悬停在控件上时如何自动弹出面板来显示额外信息。通过具体的 C# 代码实现了一个博客条目的展示，并利用 HoverMenu 展示每个条目的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(

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">

<title>HoverMenu Demo</title>

.gridRow,.gridRowHover

{

padding:3px;

}

.gridRowHover,.popupPanel

{

background-color:#F5F7F8;

}

.popupPanel

{

border:1px solid #ccc;

padding:5px;

width:130px;

}

</style>

</head>

<body>

<asp:ScriptManager ID="sm" runat="server" />

<asp:GridView ID="blogEntryGrid" runat="server" AutoGenerateColumns="False"

DataSourceID="blogDataSource" Width="335px" BackColor="Azure">

<asp:TemplateField HeaderText="Title">

<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>