Using the jquery layout within an ASP.NET UpdatePanel
I have a ASP.NET site with nested Masterpages that utilize the .layout() function in jquery.layout.js.
All of the pages display beautifully resizing dynamically, rendering a resizer bar, and vertically scrolling areas. i.e. all of the layout functionality is working.
However I would like to eliminate the "flicker" I am getting on PostBack, so wanted to introduce an ASP:UpdatePanel.
I tried to surround everything within the form on the root Master page with an ASP:UpdatePanel, at which point all of my beautiful formating disappeared, and my pages look a mess. I seem to lose my resizer bar completely and my ui-layout-center now appears at the bottom of the screen.
My master page resembles the following:
<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>
I am using the following script to format my pages:
$(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
});
});
The styles are as follows:
.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:#efef开发者_开发百科ef;
border-bottom:1px solid red;
}
.ui-layout-toggler { /* all 'toggler-buttons' */
background: #111;
}
I have tried various ways of registering my script - Registering this script using ClientScript.RegisterClientScriptInclude - using pageload() - using Sys.WebForms.PageRequestManager.getInstance().add_endRequest
I am sure that the script is running ok as I have added alert("Please work!"); and the alert displays. So something else is interferring with the rendering.
Has anyone any ideas?
A quick suggestion off the top of my head:
If your layout is being broken by the additional div tag that the update panel renders - can you make it just replace the top level div in your layout, instead of surrounding it?
<asp:UpdatePanel ID="updPanel" runat="server"
UpdateMode="Conditional" CssClass=""ui-layout-north banner">
<ContentTemplate>
etc etc
'
'
</ContentTemplate>
</asp:UpdatePanel>
Try registering your javascript file in your scriptmanager.
For example:
<asp:ScriptManager ID="SMgr" runat="server">
<Scripts>
<asp:ScriptReference path="MyScript.js" />
</Scripts>
</asp:ScriptManager>
the fix is simple, you just have to update the "jquery.layout.js" defaults to allow for nested content.
first add a parent container, this can sit just inside the update panel, see:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<div id="ui-wrapper">
remember the closer:
</div>
</ContentTemplate>
</asp:UpdatePanel>
then update the script parameters (You can do this in the "myLayout" bit):
, north__paneSelector: "#ui-wrapper .ui-layout-north"
, south__paneSelector: "#ui-wrapper .ui-layout-south"
, east__paneSelector: "#ui-wrapper .ui-layout-east"
, west__paneSelector: "#ui-wrapper .ui-layout-west"
, center__paneSelector: "#ui-wrapper .ui-layout-center"
Hope this helps
Chris
加载中,请稍侯......
精彩评论