HoverMenu控件的使用

最新推荐文章于 2012-05-08 20:09:00 发布

weixin_34297704

最新推荐文章于 2012-05-08 20:09:00 发布

阅读量68

点赞数

本文介绍如何使用 HoverMenu 控件实现在鼠标悬停时显示菜单的功能。通过设置 TargetControlID 和 PopupControlID 属性，可以指定触发菜单显示的元素及菜单本身。同时，还介绍了如何配置 PopupPosition、PopDelay 等属性来定制菜单的显示位置和延迟时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：
    当鼠标移动到指定的位置时，在不影响其他的元素的情况下出现一个菜单，并允许用户进行一些操作。
属性：
    TargetControlID:要显示菜单的目标控件的ID
    PopupControlID:作为弹出菜单的控件的ID
    HoverCssClass:鼠标移动到目标控件时目标控件的样式
    PopupPosition:弹出菜单所在的位置，共有五个值(bottom,top,left,right,center)
    OffsetX:菜单距离目标控件的位置--横坐标
    OffsetY:菜单距离目标控件的位置--纵坐标
    PopDelay:弹出菜单的延迟时间
代码实例：

请移动鼠标到某一行数据上，以便看到<strong>“停靠菜单（HoverMenu）”</strong>。

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

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

AllowPaging="True"

AutoGenerateColumns="False"

DataKeyNames="员工号码"

DataSourceID="SqlDataSource1" PageSize="5">

<asp:TemplateField>

-- 存放编辑项目样板的容器 --%>

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

<table>

<tr>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("员工号码") %>'></asp:Label>

</td>

<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("姓名") %>' width="90"></asp:TextBox>

</td>

<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("性别") %>' width="40"></asp:TextBox>

</td>

<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("邮政编码") %>' width="90"></asp:TextBox>

</td>

<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("地址") %>' width="440"></asp:TextBox>

</td>

</tr>

</table>

</asp:Panel>

-- 存放停驻选单（HoverMenu）的容器 --%>

<asp:Panel ID="panHoverMenu" runat="server" width="50px" CssClass="cssHoverMenu">

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

CommandName="Update">更新</asp:LinkButton><br />

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

CommandName="Cancel">取消</asp:LinkButton>

</div>

</asp:Panel>

-- 指定停驻选单（HoverMenu）的属性 --%>

<ajaxToolkit:HoverMenuExtender ID="hmeEdit" runat="server"

TargetControlID="panEdit"

PopupControlID="panHoverMenu"

PopupPosition="Right"

PopDelay="50"

OffsetX="-10"

OffsetY="5"

HoverCssClass="cssRowHover">

</ajaxToolkit:HoverMenuExtender>

-- 确认按钮（ConfirmButton） --%>

<ajaxToolkit:ConfirmButtonExtender ID="cbeUpdate" runat="server"

TargetControlID="lnkbtnUpdate"

ConfirmText="确定要更新吗？">

</ajaxToolkit:ConfirmButtonExtender>

</EditItemTemplate>

-- 存放项目样板的容器 --%>

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

<table>

<tr>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("员工号码") %>'></asp:Label>

</td>

<asp:Label ID="Label2" runat="server" Text='<%# Bind("姓名") %>'></asp:Label>

</td>

<asp:Label ID="Label3" runat="server" Text='<%# Bind("性别") %>'></asp:Label>

</td>

<asp:Label ID="Label4" runat="server" Text='<%# Bind("邮政编码") %>'></asp:Label>

</td>

<asp:Label ID="Label5" runat="server" Text='<%# Bind("地址") %>'></asp:Label>

</td>

</tr>

</table>

</asp:Panel>

-- 存放停驻选单（HoverMenu）的容器 --%>

<asp:Panel ID="panHoverMenu" runat="server" width="50px" CssClass="cssHoverMenu">

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

CommandName="Edit">编辑</asp:LinkButton><br />

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

CommandName="Delete">删除</asp:LinkButton>

</div>

-- 指定停驻选单（HoverMenu）的属性 --%>

<ajaxToolkit:HoverMenuExtender ID="hmeItem" runat="server"

TargetControlID="panItem"

PopupControlID="panHoverMenu"

PopupPosition="Left"

PopDelay="50"

OffsetX="10"

OffsetY="-5"

HoverCssClass="cssRowHover">

</ajaxToolkit:HoverMenuExtender>

-- 确认按钮（ConfirmButton） --%>

<ajaxToolkit:ConfirmButtonExtender ID="cbeDelete" runat="server"

TargetControlID="lnkBtnDel"

ConfirmText="确定要删除吗？">

</ajaxToolkit:ConfirmButtonExtender>

</asp:Panel>

</ItemTemplate>

<table>

<tr>

<font color="black" size="+2"><strong>员工信息列表</strong></font>

</td>

</tr>

</td>

</td>

</td>

</td>

</tr>

</table>

</HeaderTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConflictDetection="CompareAllValues"

ConnectionString="<%$ ConnectionStrings:Northwind %>"

DeleteCommand="DELETE FROM Employee WHERE EmployID = @original_EmployID AND UserName = @original_UserName AND Sex = @original_Sex AND MailCode = @original_MailCode AND Address = @original_Address"

InsertCommand="INSERT INTO Employee (UserName, Sex, MailCode, Address) VALUES (@UserName, @Sex, @MailCode, @Address)"

OldValuesParameterFormatString="original_{0}"

SelectCommand="SELECT EmployID, UserName, Sex, MailCode, Address FROM Employee"

UpdateCommand="UPDATE Employee SET UserName = @UserName, Sex = @Sex, MailCode = @MailCode, Address = @Address WHERE EmployID = @original_EmployID AND UserName = @original_UserName AND Sex= @original_Sex AND MailCode = @original_MailCode AND Address = @original_Address">

<asp:Parameter Name="original_EmployID" Type="Int32" />

<asp:Parameter Name="original_UserName" Type="String" />

<asp:Parameter Name="original_Sex" Type="String" />

<asp:Parameter Name="original_MailCode" Type="String" />

<asp:Parameter Name="original_Address" Type="String" />

</DeleteParameters>

<asp:Parameter Name="UserName" Type="String" />

<asp:Parameter Name="Sex" Type="String" />

<asp:Parameter Name=MailCode" Type="String" />

<asp:Parameter Name="Address" Type="String" />

<asp:Parameter Name="original_EmployID" Type="Int32" />

<asp:Parameter Name="originalUserName" Type="String" />

<asp:Parameter Name="original_Sex" Type="String" />

<asp:Parameter Name="original_MailCode" Type="String" />

<asp:Parameter Name="original_Address" Type="String" />

</UpdateParameters>

<asp:Parameter Name="UserName" Type="String" />

<asp:Parameter Name="Sex" Type="String" />

<asp:Parameter Name="MailCode" Type="String" />

<asp:Parameter Name="Address" Type="String" />

</InsertParameters>

</asp:SqlDataSource>

</form>

</center>

</body>

运行结果：

当鼠标移到数据行上时显示如下：

移到第4条记录上，单击"编辑"后，

单击确定后，就把记录更新。否则，放弃修改。