Ajax Control Toolkit HoverMenu

Modified on 2010/04/16 00:30 by Stephen Walther — Categorized as: Uncategorized

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl, and will associate that control with a popup panel do display additional content. When the user moves the mouse cursor over the main control two things happen:

The popup panel is displayed at a position specified by the page developer (at the left, right, top, or bottom of the main control)
Optionally, a CSS style is applied to the control to specify it as "hot"
In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row.

HoverMenu Server Reference

The properties in italics are optional.

<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
    TargetControlID="Panel9"
    PopupControlID="PopupMenu"
    HoverCssClass="popupHover"
    PopupPosition="Left"
    OffsetX="0"
    OffsetY="0"
    PopDelay="50" />

TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.

PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links:


<asp:Panel CssClass="popupMenu" ID="PopupMenu" 
runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" 
CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server" 
CommandName="Delete" Text="Delete" />
</asp:Panel>

HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.
PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.
OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".
HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. Default is 0.
PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.
Animations - Generic animations for the HoverMenu extender. See the Using Animations walkthrough and Animation Reference for more details.
- OnShow - The OnShow animation will be played each time the hover menu is displayed. The hover menu will be positioned correctly but hidden. The animation can use to display the hover menu along with any other visual effects.
- OnHide - The OnHide animation will be played each time the hover menu is hidden.

HoverMenu Client Reference

Sys.Extended.UI.HoverMenuBehavior Class

Summary - The HoverMenuBehavior is used to display a popup whenever the target is hovered over.
Parameters - Sys.UI.DomElement element

Events

showing(handler) - Add or removes an event handler for the showing event.
- Parameters - A function representing the event handler.
shown(handler) - Add or removes an event handler for the shown event.
- Parameters - A function representing the event handler.
hiding(handler) - Add or removes an event handler for the hiding event.
- Parameters - A function representing the event handler.
hidden(handler) - Add or removes an event handler for the hidden event.
- Parameters - A function representing the event handler.

Methods

initialize() - Initializes the HoverMenu control's behavior.
dipose() - Disposes the HoverMenu control's behavior.
onShow() - Play the OnShow animation.
onHide() - Play the OnHide animation.
raiseShowing(Sys.EventArgs) - Raises the showing event.
- Parameters - A Sys.EventArgs object representing event arguments for the showing event.
raiseShown(Sys.EventArgs) - Raises the shown event.
- Parameters - A Sys.EventArgs object representing event arguments for the shown event.
raiseHiding(Sys.EventArgs) - Raises the hiding event.
- Parameters - A Sys.EventArgs object representing event arguments for the hiding event.
raiseHidden(Sys.EventArgs) - Raises the hidden event.
- Parameters - A Sys.EventArgs object representing event arguments for the hidden event.

Properties

onShow - Gets or sets a generic OnShow animation's JSON definition.
onShowBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnShow animation's behavior.
onHide - Gets or sets a generic OnHide animation's JSON definition.
onHideBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnHide animation's behavior.
popupElement - Gets or sets a Sys.UI.DomElement that acts as the popup and is displayed when hovering.
HoverCssClass - Gets or sets the CSS class used when hovering.
OffsetX - Gets or sets the number of pixels to offset the popup from it's default horizontal position.
OffsetY - Gets or sets the number of pixels to offset the popup from it's default vertical position.
PopupPosition - Gets or sets a Sys.Extended.UI.HoverMenuPopupPosition object that contains the location where the popup should be positioned relative to the target control.
PopDelay - Gets or sets a number representing the time delay from when the mouse enters the target to when the popup is shown, in milliseconds. Default is 100.
HoverDelay - Gets or sets a number representing the time delay after the mouse enters the target and before the popup is shown, in milliseconds. Default is 0.

Sys.Extended.UI.HoverMenuPopupPosition Enum

Summary - Where the popup should be positioned relative to the target control.

Fields

Center - A field that specifies a HoverMenu control popup position.
Top - A field that specifies a HoverMenu control popup position.
Left - A field that specifies a HoverMenu control popup position.
Bottom - A field that specifies a HoverMenu control popup position.
Right - A field that specifies a HoverMenu control popup position.