• HoverMenu控件的使用


    功能:
        当鼠标移动到指定的位置时,在不影响其他的元素的情况下出现一个菜单,并允许用户进行一些操作。
    属性:
        TargetControlID:要显示菜单的目标控件的ID
        PopupControlID:作为弹出菜单的控件的ID
        HoverCssClass:鼠标移动到目标控件时目标控件的样式
        PopupPosition:弹出菜单所在的位置,共有五个值(bottom,top,left,right,center)
        OffsetX:菜单距离目标控件的位置--横坐标
        OffsetY:菜单距离目标控件的位置--纵坐标
        PopDelay:弹出菜单的延迟时间
    代码实例:
     
    <body onload="focus();">
      
    <center>    
          请移动鼠标到某一行数据上,以便看到
    <strong>“停靠菜单(HoverMenu)”</strong>
        
        
    <form id="form1" runat="server">
          
    <asp:ScriptManager ID="ScriptManager1" runat="server">
          
    </asp:ScriptManager>

          
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            
    <ContentTemplate>
              
    <asp:GridView ID="GridView1" runat="server"
                            AllowPaging
    ="True"
                            AutoGenerateColumns
    ="False"
                            DataKeyNames
    ="员工号码"
                            DataSourceID
    ="SqlDataSource1" PageSize="5">
                
    <Columns>
                  
    <asp:TemplateField>
                    
    <EditItemTemplate>
                      
    <%-- 存放编辑项目样板的容器 --%>
                      
    <asp:Panel ID="panEdit" runat="server">
                        
    <table>
                          
    <tr>
                            
    <td width="100">
                              
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("员工号码") %>'></asp:Label>
                            
    </td>
                            
    <td width="100">
                              
    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("姓名") %>' width="90"></asp:TextBox>
                            
    </td>
                            
    <td width="50">
                              
    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("性别") %>' width="40"></asp:TextBox>
                            
    </td>
                            
    <td width="100">
                              
    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("邮政编码") %>' width="90"></asp:TextBox>
                            
    </td>
                            
    <td width="450">
                              
    <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">
                        
    <div style="padding: 2px; border: purple 2px dashed; text-align: center;">
                          
    <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>
                    
    <ItemTemplate>
                      
    <%-- 存放项目样板的容器 --%>
                      
    <asp:Panel ID="panItem" runat="server">
                        
    <table>
                          
    <tr>
                            
    <td width="100">
                              
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("员工号码") %>'></asp:Label>
                            
    </td>
                            
    <td width="100">
                              
    <asp:Label ID="Label2" runat="server" Text='<%# Bind("姓名") %>'></asp:Label>
                            
    </td>
                            
    <td width="50">
                              
    <asp:Label ID="Label3" runat="server" Text='<%# Bind("性别") %>'></asp:Label>
                            
    </td>
                            
    <td width="100">
                              
    <asp:Label ID="Label4" runat="server" Text='<%# Bind("邮政编码") %>'></asp:Label>
                            
    </td>
                            
    <td align="left" width="450">
                              
    <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">
                        
    <div style="padding: 2px; border: purple 2px dashed; text-align: center;">
                          
    <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>
                    
    <HeaderTemplate>
                      
    <table>
                        
    <tr>
                          
    <td colspan="5" align="center" bgcolor="#ccffff">
                            
    <font color="black" size="+2"><strong>员工信息列表</strong></font>
                          
    </td>
                        
    </tr>
                        
    <tr bgcolor="#cc00ff">
                          
    <td align="center" width="100px">
                            
    <font color="white"><strong>员工号码</strong></font></td>
                          
    <td align="center" width="100px">
                            
    <font color="white"><strong>姓名</strong></font>
                          
    </td>
                          
    <td align="center" width="50px">
                            
    <font color="white"><strong>性别</strong></font>
                          
    </td>
                          
    <td align="center" width="100px">
                            
    <font color="white"><strong>邮政编码</strong></font>
                          
    </td>
                          
    <td align="center" width="450px">
                            
    <font color="white"><strong>地址</strong></font>
                          
    </td>
                        
    </tr>
                      
    </table>
                    
    </HeaderTemplate>                
                  
    </asp:TemplateField>
                
    </Columns>
                
    <AlternatingRowStyle BackColor="#FFF0C0" />
              
    </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">
            
    <DeleteParameters>
              
    <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>
            
    <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" />
              
    <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>
            
    <InsertParameters>
              
    <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条记录上,单击"编辑"后,

    单击确定后,就把记录更新。否则,放弃修改。
  • 相关阅读:
    Vue 自定义指令
    微信小程序 基础知识点整理
    32设计模式之单例
    Redis缓存穿透,缓存击穿,缓存雪崩
    Redis持久化之RDB和AOF
    Redis事务
    Mac下用Homebrew安装mongodb及遇到的问题解决
    mac下国内安装Homebrew教程
    Redis常用命令汇总及集群的配置
    redis.conf配置详解
  • 原文地址:https://www.cnblogs.com/abcdwxc/p/950081.html
Copyright © 2020-2023  润新知