У меня есть сайт ASP.NET с вложенными мастер-страницами, которые используют функцию .layout () в jquery.layout.js.
Все страницы отображают прекрасное динамическое изменение размера, рендеринг панели изменения размера и вертикальную прокрутку областей. все функциональные возможности макета работают.
Однако я хотел бы устранить «мерцание», которое я получаю на PostBack, поэтому хотел бы представить ASP: UpdatePanel.
Я пытался окружить все в форме на корневой главной странице ASP: UpdatePanel, после чего все мое прекрасное форматирование исчезло, и мои страницы выглядели беспорядочно. Кажется, я полностью потерял панель изменения размера, и теперь появился мой ui-layout-center
внизу экрана.
Моя главная страница похожа на следующую:
<body id="body">
<form id="BaseForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="ui-layout-north banner">
etc etc
'
'
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Я использую следующий скрипт для форматирования своих страниц:
$(document).ready(function() {
var myLayout;
// myLayout = $('body').layout(); -- syntax with No Options
myLayout = $('#body').layout({
// enable showOverflow on north-pane so popups will overlap other panes
north__showOverflowOnHover: false
// some resizing/toggling settings
, north__spacing_open: 0
// no resizer-bar when open (zero height)
, north__spacing_closed: 0
// big resizer-bar when open (zero height)
, south__spacing_open: 0
, south__spacing_closed: 0
, east__spacing_open: 0
, east__spacing_closed: 0
, south__minSize: 40
, east__maxSize: 10
, north__minSize: 80
, west__minSize: 300
, west__maxSize: 600
});
});
Стили следующие:
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 0px solid #fff;
padding: 10px;
overflow: auto;
}
.ui-layout-north {*overflow:hidden;}
.ui-layout-south {padding:0px;}
.ui-layout-east {padding:0px;}
.ui-layout-west {
margin-bottom:10px !important;
margin-left:10px !important;
border-right: solid 10px transparent;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
background:#f2f2f3;
border-left:1px solid red;
border-bottom:1px solid red;
}
.ui-layout-center {
padding: 0px !important;
margin-right:10px !important;
margin-bottom:10px !important;
background:#f2f2f3;
border-right:1px solid red;
border-bottom:1px solid red;
}
.ui-layout-resizer { /* all 'resizer-bars' */
background: #fff;
}
.ui-layout-resizer-west {
background:#efefef;
border-bottom:1px solid red;
}
.ui-layout-toggler { /* all 'toggler-buttons' */
background: #111;
}
Я пробовал разные способы регистрации моего скрипта
- Регистрация этого скрипта с помощью ClientScript.RegisterClientScriptInclude
- используя pageload ()
- используя Sys.WebForms.PageRequestManager.getInstance (). add_endRequest
Я уверен, что скрипт работает нормально, так как я добавил предупреждение («Пожалуйста, работайте!»); и предупреждение отображается. Так что что-то еще мешает рендерингу.
У кого-нибудь есть идеи?