Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout
按照EasyUI文档中的示例，编写layout代码：
<body class=”easyui-layout”>
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
在普通的HTML页面中可以得到一个根据窗口大小自动调整的一个布局，可是放到Asp.net(.net 4)的webform中就会出错：
<body class=”easyui-layout”>
<form id="form1" runat="server">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</form>
</body>
运行时显示“nodename为空或不是对象”
跟踪调试发现 是因为定义布局的几个DIV不是class定义为“easyui-layout”的元素的直接子对象。
于是将定义修改如下：
<form id="form1" runat="server" class=”easyui-layout”>
可是发现布局不能显示，继续研究发现是上面的form元素没有定义绝对的宽度所至，如果想下面这样定义就可以得到布局：
<form id="form1" runat="server" class=”easyui-layout”
style="width:600px;height:400px;">可是这样得到的是一个固定大小的布局，不能够随着窗口大小改变尺寸。于是想到利用resize事件增加脚本：<script type="text/javascript">
$(function () {
windowResize();
$(window).resize(function () {
windowResize();
});
});
function getWindowHeight() {
return $(window).height();
}
function getWindowWidth() {
return $(window).width();
}
function windowResize() {
var width = getWindowWidth();
var height = getWindowHeight();
$('form#form1').width(width);
$('form#form1').height(height);
$('form#form1').layout();
}
</script>
<style type="text/css">
body
{
padding:0px;
margin:0px;
}
</style>
</head>
<body >
<form id="form1" runat="server">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</form>
</body>
原来考虑将resize事件写成一个独立的函数，然后在$(window).resize(fn)中注册，可是发现这样一来，函数只会在窗体第一次装入时执行一次，以后不论怎么改变窗口都不会再触发事件，而直接将函数写在resize（）中，那么窗体装载时又不执行！在IE、FireFox、Chorm中都是这样，无奈只好这样写了！
通过上面的代码能够得到一个可以自适应窗口大小的布局！
ps:别忘了在<head>中加上必要的js文件和CSS文件的引用！
按照EasyUI文档中的示例，编写layout代码：
<body class=”easyui-layout”>
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
在普通的HTML页面中可以得到一个根据窗口大小自动调整的一个布局，可是放到Asp.net(.net 4)的webform中就会出错：
<body class=”easyui-layout”>
<form id="form1" runat="server">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</form>
</body>
运行时显示“nodename为空或不是对象”
跟踪调试发现 是因为定义布局的几个DIV不是class定义为“easyui-layout”的元素的直接子对象。
于是将定义修改如下：
<form id="form1" runat="server" class=”easyui-layout”>
可是发现布局不能显示，继续研究发现是上面的form元素没有定义绝对的宽度所至，如果想下面这样定义就可以得到布局：
<form id="form1" runat="server" class=”easyui-layout”
style="width:600px;height:400px;">可是这样得到的是一个固定大小的布局，不能够随着窗口大小改变尺寸。于是想到利用resize事件增加脚本：<script type="text/javascript">
$(function () {
windowResize();
$(window).resize(function () {
windowResize();
});
});
function getWindowHeight() {
return $(window).height();
}
function getWindowWidth() {
return $(window).width();
}
function windowResize() {
var width = getWindowWidth();
var height = getWindowHeight();
$('form#form1').width(width);
$('form#form1').height(height);
$('form#form1').layout();
}
</script>
<style type="text/css">
body
{
padding:0px;
margin:0px;
}
</style>
</head>
<body >
<form id="form1" runat="server">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</form>
</body>
原来考虑将resize事件写成一个独立的函数，然后在$(window).resize(fn)中注册，可是发现这样一来，函数只会在窗体第一次装入时执行一次，以后不论怎么改变窗口都不会再触发事件，而直接将函数写在resize（）中，那么窗体装载时又不执行！在IE、FireFox、Chorm中都是这样，无奈只好这样写了！
通过上面的代码能够得到一个可以自适应窗口大小的布局！
ps:别忘了在<head>中加上必要的js文件和CSS文件的引用！
