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文件的引用!
分享到:
相关推荐
以前没用过这东西,百度感觉资源也少,所以做完分享个。只是个练习,勿喷谢谢。题目写的很清楚 Index.aspx是主文件。Select.cs是检索用的字段。tbl_User.cs是表的实体类。ToJson.ashx你懂得。就这几个文件了,再有...
Asp.Net webform chart控件多种应用实例
18个本人收集的ASP.NET WebForm项目源码,内部包含数据库文件及使用教程,仅供大家学习参考
平台:VS2010+,Sql Server, ASP.NET 配置更改:更改BPMS.WEB\XmlConfig\Config.xml下的数据库连接字符串 启动:VS IIS Express或建立IIS对应网站(主网站项目BPMS.WEB) 登录: 用户名/密码:admin/0000 用户名/...
ASP.Net WebForm的发布(图解) http://www.cnblogs.com/iflytek/archive/2013/05/20/3088811.html
asp.net + EasyUI 分页代码. 包含数据库 .net三层结构
基于JQueryEasyUI类库的WebForm控件库,全源码, 包含 src dll js demo,应用接口 源码类型 c#
将PowerBuilder应用程序发布为ASP.NET WebForm应用程序的最佳实践
ASP.NET WebForm通用权限系统框架源码 二次开发框架 .net框架 手风琴+树风格 DB_SqlServer 源码其部署 平台:VS2010+,Sql Server, ASP.NET 配置更改:更改BPMS.WEB\XmlConfig\Config.xml下的数据库连接字符...
C#课件,欢迎大家下载使用。有很多有用的东西在里面哦!
Aspnet-ASP.NET-WebForm-Identity-Demo.zip,asp.net-webform-identity-demoasp.net-webform-identity-demo,asp.net是一个开源的web框架,用于使用.net构建现代web应用和服务。asp.net创建基于html5、css和javascript...
NULL 博文链接:https://heisetoufa.iteye.com/blog/342044
学生选课成绩管理系统(asp.net webForm 源码)
自己做项目需要经过网上学习 做出一个完整的下载粘贴即可用
asp.net webform for ios(ipa&plist) 测试环境搭建
框架 vs2019 + asp.net webform + sql server 注意sql server类和access数据库可以使用vs自带的数据库启动,不需要安装庞大的sql安装包。 模块介绍 管理员 登陆模块 教材查询模块 领书模块 欠费查询模块 退出模块 ...
框架 vs2019 + asp.net webform + echart 数据库 sql server 注意sql server类和access数据库可以使用vs自带的数据库启动,不需要安装庞大的sql安装包。 就业预测系统(主要连接处理学生成绩管理系统的数据的数据...
swfupload/kindeditor (asp.net webform用户控件)
框架 vs2019 + asp.net webform + sql server 注意sql server类和access数据库可以使用vs自带的数据库启动,不需要安装庞大的sql安装包。 测试用户 qqq 123456 后台管理用户 admin 123456 模块介绍 管理员 上传...
C# .net webform 项目,运行后地址 无aspx 后缀。完整源码。