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

原创 2007年09月21日 19:46:00
 
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
 
 
 
 

相关文章推荐

ajax HoverMenuExtender的应用

PopupControlID="sliderDiv" PopupPosition="Right" OffsetX="10" OffsetY="10" PopDelay="3000">

ASP.NET AJAX控件之HoverMenu

  • 2007年11月14日 10:26
  • 6.35MB
  • 下载

Android菜单控件置顶悬浮

Android scrollview 嵌套viewpager时,菜单置顶悬浮效果

自定义控件六:高仿安卓市场桌面悬浮菜单

自定义控件六:高仿安卓市场桌面悬浮菜单 最近在学习自定义控件,无意中有看到了手机上“安卓市场”桌面悬浮菜单,感觉很高大上,所以自己就简单照着样子做了一遍:首先看原图: 涉及到的知识: ①首先...

AjaxControlToolKit的HoverMenu控件

  • 2009年07月03日 15:51
  • 484KB
  • 下载

推荐web页面开发中11个Javascript(AJAX)树形菜单(树形控件)

树形菜单能很好的呈现菜单项之前的从属关系,结构清晰明了。本文为你收集了11个javascript树形菜单。...

ASP.NET AJAX Altas

  • 2007年09月01日 23:58
  • 1.54MB
  • 下载

Android 实现控件悬浮效果

本文出自xiaanming的博客(http://blog.csdn.net/xiaanming) 随着移动互联网的快速发展,它已经和我们的生活息息相关了,在公交地铁里面都能看到很多人的人低头看着...

任何界面显示悬浮控件

  • 2016年01月06日 15:51
  • 3KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:altas(ajax)控件(十三):悬浮菜单HoverMenu
举报原因:
原因补充:

(最多只允许输入30个字)