个人中心
gpt4 book ai didi

asp.net - jquery scrollpane ms ajax updatepanel 回发后不起作用

转载 作者：行者123 更新时间：2023-12-01 03:06:07 26 4
gpt4 key购买 nike

我收到了一个网站的新设计，设计者在设计中使用了 jquery。我正在将设计实现到 ASP.NET Ajax 应用程序中。

但是我遇到了一个问题。我有一个带有更新面板和菜单的页面。单击菜单项时，用户控件将动态加载到更新面板上的占位符中。这使得页面没有完全刷新，而只是更新面板。

现在，用户控件中的内容包含一个滚动 Pane ，该滚动 Pane 延伸到窗口的最大高度。第一次运行良好，但是当单击菜单项并加载新的用户控件时，该控件的内容包含相同的滚动 Pane 。高度不会扩展到窗口的最大高度，然后仅使用所需的高度。当我不包含 jquery 文件时，也会发生同样的事情，因此它必须对 jscript 库执行某些操作。

页面中使用的脚本:

scripts/jquery.js
jquery.watermark.js
scripts/jquery.customSelect.js
scripts/jquery.easing.js
scripts/jquery.logger.js
scripts/jquery.sizes.min.js
scripts/jquery.mousewheel.js
scripts/jquery.em.js
scripts/jquery.core.js
scripts/jquery.accordion.js
scripts/jquery.tabs.js
scripts/jquery.scroll.js
scripts/jquery.datepick.js
scripts/jquery.datepick-nl.js
scripts/jquery.scripts.js

加载主页面的页面主要代码:

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="container">

<div id="logo"></div>
    <uc2:Menu ID="ucMenu" runat="server" />
    <uc3:Kruimelpad ID="ucKruimelpad" runat="server" />
    <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Always">
    <ContentTemplate>
 <asp:PlaceHolder ID="phMain" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
<div id="sideBar"> 
   <uc1:Login ID="ucLogin" runat="server" />
</div>
<div class="clearboth"></div>
</div>

<uc4:Footer ID="ucFooter" runat="server" />

</div>
</form>
</body>
</html>

用户控件主要代码:

<div class="editMenu">  
</div> 
 <div id="content" class="orange-bar"> 
   <div id="contentVlak" class="scroll_pane">
<h1><asp:Label ID="lblNoAccount" runat="server" Text="<%$ Resources:Login, no_account %>"></asp:Label></h1>

<p><asp:Label ID="lblMainText" runat="server" Text="<%$ Resources:Login, main_text %>"></asp:Label>&nbsp;<asp:LinkButton 
                    ID="lbAccountAanvragen" runat="server" 
                    Text="<%$ Resources:Login, demo_account_aanvragen %>" 
                    onclick="lbAccountAanvragen_Click"></asp:LinkButton>.</p>
            </div>
    </div>

CSS 代码:

 #content {
 background: url(../images/contentBg.png) repeat-y left top;
 position: relative;
 top: 58px;
 margin: 0px 0px 0px 11px !important;
 width: 886px;
 padding: 20px 20px 10px 20px;
 }

  #contentVlak {
  width: 676px;
  height:100%;
  padding: 0px 20px;
  }

   #contentVlak p {
   line-height: 20px;
   margin-bottom: 10px;
   font-size: 11.5px;
   }

   #contentVlak a {
   font-weight: bold;
   text-decoration: none;
   }

    #contentVlak a:hover {
    text-decoration: underline;
    }


/* Scrollpane styles */

.scroll_pane {
 overflow: auto;
}

.jScrollPaneContainer {
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.jScrollPaneTrack {
 position: absolute;
 cursor: pointer;
 right: 0;
 top: 0;
 height: 100%;
 background: url(../images/scrollTrack.png) repeat-y left top;
}

.jScrollPaneDrag {
 position: absolute;
 background: #666;
 cursor: pointer;
 overflow: hidden;
 height: 20px !important;
 width: 20px;
 background: url(../images/scrollPane.png) no-repeat left top;
}
.jScrollPaneDragTop {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
}
.jScrollPaneDragBottom {
 position: absolute;
 bottom: 0;
 left: 0;
 overflow: hidden;
}
a.jScrollArrowUp {
 display: block;
 position: absolute;
 z-index: 1;
 top: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 background: url(../images/scrollUp.png) no-repeat left top;
 height: 16px;
 width: 16px;
}


a.jScrollArrowDown {
 display: block;
 position: absolute;
 z-index: 1;
 bottom: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 background: url(../images/scrollDown.png) no-repeat left top;
 height: 16px;
 width: 16px;
}

我做错了什么？

调整 block 大小的代码:

function resizeBlock(object) {

var windowHeight = $(window).height();
var start = object.offset().top;
var margin = object.margin().bottom + object.margin().top;
var padding = object.padding().bottom + object.padding().top;

var totalHeight = windowHeight - start - padding - 9;

object.height(totalHeight);

// Hoogtes van scroll-ding fixen
object.find(".scroll_pane").height(totalHeight);
object.find(".jScrollPaneContainer").height(totalHeight);
object.find(".jScrollPaneTrack").height(totalHeight);
object.find(".jScrollPaneDrag").height(totalHeight - 32);

// Object opnieuw toevoegen 
$(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });
}

$(document).ready(function () {

    // Functie zie hierboven
    resizeBlock($("#content"));
    $(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });

    $(window).resize(function() {
        resizeBlock($("#content"));
    });


    // Custom selectboxes

    if($(".default-usage-select").length > 0) {
        $(".default-usage-select").selectbox();
    }


    // Watermarks op homepage

    if($("#relatiecode").length > 0) {
        $("#relatiecode").Watermark("relatiecode", "#808285");
    }

    if($("#wachtwoord").length > 0) {
        $("#wachtwoord").Watermark("wachtwoord", "#808285");
    }

    // Accordion box

    if($(".accordion").length > 0) {
        $('.accordion').accordion({ 
            header: '.accordionTrigger',
            autoheight: true,
            animate: '100'
        });

        if($(".accordionTrigger").hasClass("selected")) {
            $("#accordionLastTrigger").addClass  ("activeLastTrigger");
        }
    }

    // Tabbladen 

    if($("#tabContainer").length > 0) {
        $('#tabContainer > ul').tabs();
    }

    // IE 6 Hover fix voor menu's

    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 6) {
        $('ul li').hover(function() {
            $(this).addClass('ie6hover');
        }, function() {
            $(this).removeClass('ie6hover');
        });  
    }

} 
});if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

最佳答案

发生这种情况是因为控件本质上被重新绘制到浏览器，并且您为滚动 Pane 初始化的 jQuery 并未通过重新绘制进行初始化。

您可以利用 JavaScript 函数来重新初始化 jQuery 代码。我将举一个简单的例子，确保您的页面上有 ScriptManager(您应该因为它是一个更新面板...)...

<script type="text/javascript">
    function pageLoad() {
        if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }
    }
    function endRequestHandler(sender, args) {
        //Redo the scroll pane jQuery Initialization here...
    }

</script>

关于asp.net - jquery scrollpane ms ajax updatepanel 回发后不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1565478/

26 4 0
文章推荐： Scala ZIO.bracket : handling errors of releasing resource
文章推荐： javascript - 如何用D3拟合多项式曲线？
文章推荐： sql - MS Access 数据库中的最短路径
文章推荐： javascript - 如何使用feathersjs过滤服务？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com