altas(ajax)控件(十三)：悬浮菜单HoverMenu

HoverMenu 可以附加到任何一个ASP.NET WebControl 上，它结合一个Panel产生悬浮效果。

下面一个例子, ASP.NET GridView从数据库里查询并显示数据。当鼠标移动到GridView上时，每一行都会出现悬浮菜单HoverMenu，我们可以通过菜单中的命令操作数据。

例子：

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"

ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >

<Columns>

<asp:TemplateField>

<ItemTemplate>

<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">

<div style="border:1px outset white;padding:2px;">

<div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div>

<div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div>

</div>

</asp:Panel>

<asp:Panel ID="Panel9" runat="server">

<table width="100%">

<tr>

<td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server"

Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>

<td width="50%"><asp:Label ID="Label2" runat="server"

Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>' /></td>

<td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>' /></td>

</tr>

</table>

</asp:Panel>

<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"

HoverCssClass="popupHover"

PopupControlID="PopupMenu"

PopupPosition="Left"

TargetControlID="Panel9"

PopDelay="25" />

</ItemTemplate>

<EditItemTemplate>

<asp:Panel ID="Panel9" runat="server" Width="80%">

<table width="100%">

<tr>

<td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"

Text='<%# Bind("Title") %>' Width="100" /></td>

<td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"

Text='<%# Bind("Description") %>' Width="150" /></td>

<td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"

Text='<%# Bind("Priority") %>' Width="40" /></td>

</tr>

</table>

</asp:Panel>

<ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"

TargetControlID="Panel9"

PopupControlID="PopupMenu"

HoverCssClass="popupHover"

PopupPosition="Right" />

<asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">

<div style="border:1px outset white">

<asp:LinkButton ID="LinkButton1" runat="server"

CausesValidation="True" CommandName="Update" Text="Update" />

<br />

<asp:LinkButton ID="LinkButton2" runat="server"

CausesValidation="False" CommandName="Cancel" Text="Cancel" />

</div>

</asp:Panel>

</EditItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

属性	说明
TargetControlID	显示的Plane的ID
HoverCssClass	显示的Plane的CSS
PopupPostion	悬浮的位置：Left (默认), Right, Top, Bottom, Center
OffsetX/OffsetY	相对于默认值的偏移值
PopDelay	出现Plane的延时，默认是100.
Animations	参照前面动画控件Animations

效果：http://asp.net/AJAX/Control-Toolkit/Live/HoverMenu/HoverMenu.aspx