2
웹 사이트에 대한 새 디자인을 받았으며 디자이너가 jquery를 사용했습니다. ASP.NET Ajax 응용 프로그램에 디자인 no를 구현하고 있습니다.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> <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;
}
내가 뭘 잘못하고 있니? 블록의 크기를 조정하기위한
코드 : 컨트롤이 기본적으로 브라우저와 당신이 다시 그리기로 초기화되지 않은 스크롤 창에 대한 초기화 jQuery를에 다시 칠하고 있기 때문에
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();
스크롤 창을 설정하는 jQuery 코드를 추가 할 수 있습니까? – RSolberg
스크롤 패널을 설정하는 JQuery 코드를 추가했습니다. 아래 스크립트를 scriptmanager에 넣어야합니까? 빠른 응답을위한 고맙습니다. – Patrick
document.ready 함수 내에있는 코드는 setupPage()와 같은 단일 함수로 리팩터링 될 수 있습니다. 그런 다음 document.ready와 endRequestHandler 내에서 setupPage()를 호출하면 아래에 표시됩니다. – RSolberg