jquery scrollpane ms ajax updatepanel在回帖後不起作用

我收到了一個網站的新設計，並在設計中使用了jquery。我正在將設計no實現到ASP.NET Ajax應用程序中。jquery scrollpane ms ajax updatepanel在回帖後不起作用

但我遇到了一個問題。我有一個包含更新面板和菜單的頁面。當單擊菜單項時，用戶控件將被動態加載到更新面板上的佔位符中。這使得頁面並未完全刷新，而只是更新面板。

現在，用戶控件中的內容包含一個擴展到窗口最大高度的滾動窗格。第一次運行良好，但是當點擊一個菜單項並且加載了新的用戶控件時，其內容將包含相同的滾動窗格。高度不會擴展到窗口的最大高度，它只會使用它需要的高度。同樣的事情發生時，我不包括jquery文件，所以它必須做的jscript庫。

是在頁面中使用的腳本：

<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>

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

加載主頁的頁面的主代碼

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; 
}

我在做什麼錯？

代碼調整塊：

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();

來源

2009-10-14 Patrick

你可以添加你的jQuery代碼來設置滾動窗格嗎？ – RSolberg 2009-10-14 10:35:44

我剛剛添加了設置滾動窗格的JQuery代碼。我應該把腳本放在scriptmanager下面嗎？ Thanx爲您的快速響應！ – Patrick 2009-10-14 10:41:48

您在document.ready函數中擁有的代碼可以重構爲像setupPage（）這樣的單個函數。然後，您將從document.ready和endRequestHandler中調用setupPage（），我在下面向您展示... – RSolberg 2009-10-14 10:42:36

這是發生因爲控制基本上被粉刷一新的瀏覽器和您初始化滾動窗格未與重繪初始化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>

來源

2009-10-14 10:32:08 RSolberg

感謝RSolberg，你的解決方案爲me..I我正在使用JScrollpane for Apple devices ..並且它可以與更新面板一起使用。這裏是我更新的代碼：

if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) { 
     $('#<%=iWrapper1.clientID%>').jScrollPane(); 
     $('#<%=iWrapper2.clientID%>').jScrollPane(); 
     $('.videoDisplay').jScrollPane(); 
    } 


    if (navigator.userAgent.indexOf("MSIE") != -1) 
     window.attachEvent("onload", pageLoad) 
    else 
     window.addEventListener("load", pageLoad, false); 


    function pageLoad() { 
     if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 

     } 
    } 

    function endRequestHandler(sender, args) { 
     if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) { 
      $('#<%=iWrapper1.clientID%>').jScrollPane(); 
      $('#<%=iWrapper2.clientID%>').jScrollPane(); 
      $('.videoDisplay').jScrollPane(); 
     } 
    }

來源

2011-08-18 10:21:50 shirlymp

jquery scrollpane ms ajax updatepanel在回帖後不起作用

回答

相關問題