Introduction:
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:
Description:
1.The popup panel is displayed at a position specified by the page developer (at the left, right, top, or bottom of the main control)
1.The popup panel is displayed at a position specified by the page developer (at the left, right, top, or bottom of the main control)
2.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.
Mouse
over the GridView above to see this behavior. Upon choosing "Edit",
the row will go into edit mode, and you'll notice the menu will appear to the
right of the content, demonstrating the ability to choose the popup position.
|
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected
void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs
e)
{
Label1.ForeColor =
System.Drawing.Color.FromName(RadioButtonList1.SelectedItem.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax
HoverMenuExtender - How to use HoverMenuExtender in asp.net ajax</title>
<style type="text/css">
.PanelCSS
{
visibility:
hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color: DeepPink; font-style:
italic;">
Ajax Control Toolkit Example:
Using HoverMenuExtender</h2>
<hr width="550" align="left" color="Pink" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
TargetControlID="Label1"
PopupControlID="Panel1" PopupPosition="Bottom">
</cc1:HoverMenuExtender>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Color changeable label." Font-Size="XX-Large"
Font-Names="Comic Sans MS">
</asp:Label>
<asp:Panel ID="Panel1" runat="server" Width="300" BorderColor="Gray" BorderWidth="1"
CssClass="PanelCSS">
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatColumns="3"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem>Tan</asp:ListItem>
<asp:ListItem>Crimson</asp:ListItem>
<asp:ListItem>DarkBlue</asp:ListItem>
<asp:ListItem>SeaGreen</asp:ListItem>
<asp:ListItem>OrangeRed</asp:ListItem>
<asp:ListItem>Magenta</asp:ListItem>
<asp:ListItem>DeepPink</asp:ListItem>
</asp:RadioButtonList>
</asp:Panel>
</div>
</form>
</body>
|
0 comments :
Post a Comment