通过 Ajax 或 jQuery 实现 ASP.NET 浮动 Div 菜单答案

【问题标题】：ASP.NET Floating Div Menu via Ajax or jQuery通过 Ajax 或 jQuery 实现 ASP.NET 浮动 Div 菜单
【发布时间】：2011-07-26 20:53:45
【问题描述】：

问题：我有一个母版页，指示 css、html、head、body 内容，所以我不能使用浮动 div 技术，需要通过仅 ajax/asp 路由。我在网上能找到的关于这个主题的只是人们在实现这个问题时遇到了问题，但没有实际的工作示例代码。

我尝试在 jtricks.com 上使用jQuery based floating div menu，但说明是针对 html 文件而不是 asp.net 文件，导致页面加载出错。

 <script type="text/javascript" src="specify script file URL here">  
 </script>  

 <div id="floatdiv" style="  
 position:absolute;  
 width:200px;height:50px;top:10px;right:10px;  
 padding:16px;background:#FFFFFF;  
 border:2px solid #2266AA;  
 z-index:100">  
 This is a floating javascript menu.  
 </div>  

    <script type="text/javascript">  
    floatingMenu.add('floatdiv',  
    {  
        // Represents distance from left or right browser window  
        // border depending upon property used. Only one should be  
        // specified.  
        // targetLeft: 0,  
        targetRight: 10,  

        // Represents distance from top or bottom browser window  
        // border depending upon property used. Only one should be  
        // specified.  
        targetTop: 10,  
        // targetBottom: 0,  

        // Uncomment one of those if you need centering on  
        // X- or Y- axis.  
        // centerX: true,  
        // centerY: true,  

        // Remove this one if you don't want snap effect  
        snap: true  
    });  
   </script>

请提供一些关于通过 Ajax 在 TabContainer 或 DragPanel 中使用浮动 div 的示例代码。

谢谢！ :)

【问题讨论】：

标签： jquery asp.net ajax floating

【解决方案1】：

为了使基于 jquery 的浮动 div 菜单工作，我将 div 的代码放在 DynamicDataManager 控件之后的 ASP Content Main Section 和 ASP UpdatePanel 中：

 <asp:Content ID="main" ContentPlaceHolderID="main" Runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
            <EditItemTemplate>

                <div id="floatdiv" style="position:absolute; width:200px; height:50px; top:10px; right:10px; padding:16px;background:#FFFFFF; border:2px solid #080808; z-index:100">
                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" Text="Update" style="right:25px; padding:25px" updateDisabled = "updateDisabled +1; if (updateDisabled == 1) {return true;} else {this.disabled=true;return false;};" />
                <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
                </div>

我还添加了一个禁用更新按钮，以防止人们在数据库中创建 2 条重复记录：

<asp:DynamicEntity runat="server" Mode="Edit" OnInit="DynamicEntity_Init"/>

<script language="javascript" type="text/javascript"> var updateDisabled = 0; </script>
<asp:LinkButton runat="server" CommandName="Update" Text="Update" OnClientClick="updateDisabled = updateDisabled +1; if (updateDisabled == 1) {return true;} else {this.disabled=true;return false;};" />
<asp:LinkButton runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />

我将实际脚本放在 ASP Content Main 标记中，但在更新面板之后：

 <script type="text/javascript">        
    floatingMenu.add('floatdiv',
    {
        // Represents distance from left or right browser window   
        targetRight: 10,

        // Represents distance from top or bottom browser window  
        targetTop: 10,

        snap: true
    });  
 </script>

【讨论】：