我收到了一个网站的新设计，设计者在设计中使用了 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> <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/