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

[align=left]HoverMenu 可以附加到任何一个ASP.NET WebControl 上，它结合一个Panel产生悬浮效果。[/align]
[align=left]下面一个例子, ASP.NET GridView从数据库里查询并显示数据。当鼠标移动到GridView上时，每一行都会出现悬浮菜单HoverMenu，我们可以通过菜单中的命令操作数据。[/align]
[align=left]例子：[/align]
[align=left] <asp:GridView ID="GridView1" runat="server"[/align]
[align=left] AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"[/align]
[align=left] ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >[/align]
[align=left] <Columns>[/align]
[align=left] <asp:TemplateField>[/align]
[align=left] <ItemTemplate>[/align]
[align=left] <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">[/align]
[align=left] <div style="border:1px outset white;padding:2px;">[/align]
[align=left] <div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div>[/align]
[align=left] <div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div>[/align]
[align=left] </div>[/align]
[align=left] </asp:Panel>[/align]
[align=left] [/align]
[align=left] <asp:Panel ID="Panel9" runat="server">[/align]
[align=left] <table width="100%">[/align]
[align=left] <tr>[/align]
[align=left] <td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server"[/align]
[align=left] Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>[/align]
[align=left] <td width="50%"><asp:Label ID="Label2" runat="server"[/align]
[align=left] Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>' /></td>[/align]
[align=left] <td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>' /></td>[/align]
[align=left] </tr>[/align]
[align=left] </table>[/align]
[align=left] </asp:Panel>[/align]
[align=left] [/align]
[align=left] <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"[/align]
[align=left] HoverCssClass="popupHover"[/align]
[align=left] PopupControlID="PopupMenu"[/align]
[align=left] PopupPosition="Left"[/align]
[align=left] TargetControlID="Panel9"[/align]
[align=left] PopDelay="25" />[/align]
[align=left] </ItemTemplate>[/align]
[align=left] <EditItemTemplate> [/align]
[align=left] <asp:Panel ID="Panel9" runat="server" Width="80%">[/align]
[align=left] <table width="100%">[/align]
[align=left] <tr>[/align]
[align=left] <td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"[/align]
[align=left] Text='<%# Bind("Title") %>' Width="100" /></td>[/align]
[align=left] <td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"[/align]
[align=left] Text='<%# Bind("Description") %>' Width="150" /></td>[/align]
[align=left] <td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"[/align]
[align=left] Text='<%# Bind("Priority") %>' Width="40" /></td>[/align]
[align=left] </tr>[/align]
[align=left] </table>[/align]
[align=left] </asp:Panel>[/align]
[align=left] [/align]
[align=left] <ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"[/align]
[align=left] TargetControlID="Panel9"[/align]
[align=left] PopupControlID="PopupMenu"[/align]
[align=left] HoverCssClass="popupHover"[/align]
[align=left] PopupPosition="Right" />[/align]
[align=left] [/align]
[align=left] <asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">[/align]
[align=left] <div style="border:1px outset white">[/align]
[align=left] <asp:LinkButton ID="LinkButton1" runat="server"[/align]
[align=left] CausesValidation="True" CommandName="Update" Text="Update" />[/align]
[align=left] <br />[/align]
[align=left] <asp:LinkButton ID="LinkButton2" runat="server"[/align]
[align=left] CausesValidation="False" CommandName="Cancel" Text="Cancel" />[/align]
[align=left] </div>[/align]
[align=left] </asp:Panel>[/align]
[align=left] </EditItemTemplate>[/align]
[align=left] </asp:TemplateField>[/align]
[align=left] </Columns>[/align]
[align=left] </asp:GridView>[/align]
[align=left] [/align]

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

[align=left] [/align]
[align=left]效果：http://asp.net/AJAX/Control-Toolkit/Live/HoverMenu/HoverMenu.aspx [/align]