Home > DeveloperSection > Articles > Ajax Toolkit HoverMenuExtender Control in ASP.Net

Ajax Toolkit HoverMenuExtender Control in ASP.Net

Posted by  Pushpendra Singh
on    December-07-2010 14:08 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 8894  View(s)
Rate this:

Ajax Toolkit HoverMenuExtender Control in ASP.Net

The ASP.NET AJAX HoverMenuExtender can be attached to any ASP.NET WebControl. The extender associates the ASP.NET control with a panel that is popped up to display additional content, whenever the user moves the mouse cursor over the ASP.NET control.

HoverMenu Properties

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

·         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 its default position, as specified by PopupPostion.

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

Code:

<%-- Add the ScriptManger control,HoverMenuExtender and Listbox--%>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

 

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="ListBox1" PopupPosition="Right">

</cc1:HoverMenuExtender>

 

<asp:Label ID="Label1" runat="server" Text="which language you want to learn " ForeColor="#CC3300"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:ListBox ID="ListBox1" runat="server">

 <asp:ListItem>Choose from these language only</asp:ListItem>

  <%--  Here we are adding Item in ListBox  --%>

  <asp:ListItem>C#</asp:ListItem>

  <asp:ListItem>J#</asp:ListItem>

  <asp:ListItem>VB</asp:ListItem>

  <asp:ListItem>Java</asp:ListItem>

 </asp:ListBox>

 

Description

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID=" TextBox1" PopupControlID=" ListBox1" PopupPosition="Right">

</cc1:HoverMenuExtender>

 

HereHoverMenuExtender is targeting control Panel1 TargetControlID="TextBox1" and popped up control is Panel2 PopupControlID="ListBox1".Here PopupPosition is declared “Right” so that popup window display in Right side.

Run the project

 

AjaxControl Toolkit HoverMenuExtender Control in ASP.Net

 

When Mouse over in the TextBox l then popped up control will display in specified position. Here PopupPosition="Right" so popup control will display in right postion.

 

AjaxControl Toolkit HoverMenuExtender Control in ASP.Net

 

 
















Recent Activities


Kamlakar Singh added new Blog CSS Pseudo-Class   17 hours ago


Sumit Kesarwani added new Question What is the serialization?   2 days ago

Don't want to miss updates? Please click the below button!