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
 
 
 
 

CSS+JS 悬浮固定菜单效果

首先,先看实例,米扑代理: http://proxy.mimvp.com/price.php效果如下图,兼容chrome,firefox,windows,360,搜狗等主流浏览器米扑代理,是由百度,小...
  • sunboy_2050
  • sunboy_2050
  • 2015年08月22日 13:28
  • 9991

利用WindowManager生成悬浮按钮及悬浮菜单

简介本文模仿实现的是360手机卫士基础效果,同时后续会补充一些WindowManager的原理知识。 整体思路360手机卫士的内存球其实就是一个没有画面的应用程序,整个应用程序的主体是一个Servi...
  • yy254117440
  • yy254117440
  • 2017年01月21日 16:59
  • 308

jquery实现悬浮栏上下滑动点击

源码下载:
  • zhaihaohao1
  • zhaihaohao1
  • 2015年11月11日 07:26
  • 515

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

HoverMenu 可以附加到任何一个ASP.NET WebControl 上,它结合一个Panel产生悬浮效果。下面一个例子, ASP.NET GridView从数据库里查询并显示数据。当鼠标移动到...
  • andylaufzf
  • andylaufzf
  • 2007年10月24日 10:20
  • 517

android 自定义悬浮菜单

android中的自定义的悬浮菜单,其实就是一个dialog。类似于下图。 代码如下: /** * 此类为自定义菜单Dialog * */ public class MenuDialo...
  • liuxiong1115
  • liuxiong1115
  • 2013年09月12日 15:55
  • 882

安卓Andriod使用入门(九)【悬浮窗菜单】

人生最重要的不是我们置身何处,而是我们将前往何处。MainActivity.java代码:package siso.multilistview;import android.os.Build; imp...
  • WuLex
  • WuLex
  • 2016年11月13日 23:48
  • 1468

让组件悬浮所有页面之上

在android中悬浮显示可拖动的歌词栏 一文中,歌词栏只能在应用打开着才能显示,退出后就不见了,如何让歌词栏凌驾于所有页面之上呢,下面补充一段代码: package com.home.testw...
  • u010142437
  • u010142437
  • 2014年03月13日 15:47
  • 1307

js 悬浮导航

悬浮导航 * { margin: 0px; padding: 0px; } ...
  • sinat_27790827
  • sinat_27790827
  • 2016年05月05日 19:18
  • 154

android 使用Scroller实现美团悬浮框,网易左右滑动菜单效果

android 使用Scroller实现美团悬浮框,网易左右滑动菜单效果
  • coderinchina
  • coderinchina
  • 2016年06月12日 15:55
  • 1756

jQuery实例(ajax通信和动态加载二级菜单)

今天是复习jQuery的最后一天,基本常用技术已全部练习,以后遇到不会的可查文档。总的来说,jQuery的出现,在写前端代码时省事了好多。 one.jsp "> ...
  • zuosixiaonengshou
  • zuosixiaonengshou
  • 2017年03月18日 20:57
  • 931
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:altas(ajax)控件(十三):悬浮菜单HoverMenu
举报原因:
原因补充:

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