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你懂得。就这几个文件了,再有...
平台:VS2010+,Sql Server, ASP.NET 配置更改:更改BPMS.WEB\XmlConfig\Config.xml下的数据库连接字符串 启动:VS IIS Express或建立IIS对应网站(主网站项目BPMS.WEB) 登录: 用户名/密码:admin/0000 用户名/...
Asp.Net WebForm Chart 控件是.NET Framework提供的一种强大的数据可视化工具,用于在Web应用程序中创建各种复杂的图表。它能够帮助开发者将数据转化为易于理解的图形,如柱状图、折线图、饼图、散点图等,适用于...
*** WebForm发布是一个将开发完成的Web应用程序部署到服务器上的过程。发布可以将程序集和资源部署到服务器的适当位置,以便用户可以访问该应用程序。本文将详细介绍*** WebForm两种发布方法,包括发布到默认的IIS...
在IT行业中,Asp.NET和EasyUI是两个广泛使用的框架,用于构建高效、美观的Web应用程序。Asp.NET是微软推出的服务器端开发平台,而EasyUI则是一个基于jQuery的前端UI库,它提供了丰富的组件,使得开发者能够快速构建...
在将PowerBuilder应用程序迁移至ASP.NET WebForm的过程中,首要关注的是PowerScript与.NET语言(如C#)之间的差异。由于.NET语言相较于PowerScript有着更为严格的语法规范,开发者需要在迁移前对这两种语言的差异有...
在ASP.NET WebForm开发中,有时我们需要创建具有复杂布局的表格,例如,表格可能需要有冻结的列或表头,以便用户在滚动时始终保持关键信息可见。这种功能在处理大量数据或者多列分类的场景中尤其有用。下面将详细...
在C# ASP.NET WebForm框架下,Web页面打印是一个常见的需求。这通常涉及到将网页内容输出到打印机或者生成PDF文档供用户下载打印。本篇将深入探讨如何控制Web页面上哪些部分可以打印,哪些部分不需要打印,以及相关...
ASP.NET Web Form是一个微软开发的框架,用于构建交互式的、数据驱动的Web应用程序。这个"asp.net webform 注册登录Demo"是一个实例项目,旨在帮助开发者理解如何在ASP.NET Web Form环境中实现用户注册和登录功能。...
ASP.NET WebForm是微软开发的一款用于构建Web应用程序的框架,它是.NET Framework的重要组成部分。这个压缩包包含18个ASP.NET WebForm项目的源码,对于学习和理解WebForm的工作原理、开发流程以及数据库交互等方面...
ASP.NET WebForm通用权限系统框架源码 二次开发框架 .net框架 手风琴+树风格 DB_SqlServer 源码其部署 平台:VS2010+,Sql Server, ASP.NET 配置更改:更改BPMS.WEB\XmlConfig\Config.xml下的数据库连接字符...
C#课件,欢迎大家下载使用。有很多有用的东西在里面哦!
- 在Visual Studio中新建一个ASP.NET Web应用程序项目,选择WebForm模板。 - 添加必要的页面和控件,如下载链接、状态显示等。 3. **部署ipa和plist文件**: - 将ipa和plist文件上传到Web服务器的指定目录,例如...
采用三层架构进行开发Asp.net webform框架数据库采用Ado.net操作,前端使用HTML css jquery,javascript,ajax,HTML布局, 后端asp.net form,图片上传下载,分页,模糊查询等,包含功能包括登录,注册,购物车,我的...
【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发...
4. Webform页面:Webform是ASP.NET中的一个模型,它提供了与传统桌面应用程序相似的事件驱动编程模型。开发者可以使用ASP.NET控件创建用户界面,并在服务器端处理用户交互。 5. 源码分析:通过查看源码,我们可以...
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...
ASP.NET是一种广泛使用的微软开发平台,用于构建...通过这个项目示例,开发者可以学习到如何在ASP.NET环境中集成PDF查看功能,这对于构建包含大量PDF文档的Web应用非常有用,比如在线文档阅读平台、电子书籍网站等。
总结,基于JQueryEasyUI的WebForm控件库为.NET开发者提供了一个强大的工具集,简化了WebForm开发过程,提高了开发效率。通过深入理解并熟练运用这个控件库,开发者可以创建出既美观又功能强大的Web应用程序。同时,...