easyui Layout 自动适应窗口大小
来源:互联网 发布:短信发送软件下载 编辑:程序博客网 时间:2024/04/18 04:52
(2012-04-17注:easyui新版本layout已经有fit属性,不用这么麻烦)
一个小小的应用
一、使用asp.net 自带的form;
二、用div代替asp.net 自带的form;
开发工具:VS2008
框架:jquery-easyui-1.2.6.js,jquery-1.7.2.min.js
浏览器:IE6,chrome20.0.1132
一、使用asp.net 自带的form;
由于aspx页面的特殊性,class='easyui-layout'如果直接放在body上,用div作region,会因为中间间隔著名的<form id="form1" runat="server" >服务器控件,而出现缺失节点的错误;
目前可行的方法是把class='easyui-layout'放到<form id="form1" runat="server" >服务器控件内,同时,让form自动适应body的高宽;
具体操作为,取window的高宽,设置给form;
其中,为了给body四周留出一定的margin,取出的window高宽各减去10,同时把body的margin:5px;
窗口自适应js文件:WindowAutoFit.js
- /// <reference path="jquery-easyui/jquery-1.7.2.min.js" />
- /// <reference path="jquery-easyui/jquery.easyui.min.js" />
- //窗口自适应调整
- $(function() {
- windowResize(); //文档载入时加载
- $(window).resize(function() {
- windowResize(); //窗口改变大小时加载
- });
- });
- function windowResize() {
- var width = $(window).width()-10; //减去10与body中margin:5px共同作用:为body留的边距
- var height = $(window).height()-10;
- $('form#form1').width(width);
- $('form#form1').height(height);
- $('form#form1').layout(); //相当于<form id='form1' class='easyui-layout' runat="server">
- }
相关aspx文件:index.aspx
- <html>
- <head runat="server">
- <title>Test</title>
- <script type="text/javascript" src="../Public/js/FusionCharts.js"> </script>
- <link href="../Public/js/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
- <link href="../Public/js/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
- <script src="../Public/js/jquery-easyui/jquery-1.7.2.min.js" type="text/javascript"> </script>
- <script src="../Public/js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"> </script>
- <script src="../Public/js/WindowAutoFit.js" type="text/javascript"></script>
- <script src="../Public/js/ImtTrade.js" type="text/javascript"> </script>
- </head>
- <body style="margin:5px; padding: 0px;">
- <!-- class="easyui-layout"由js文件放到form中 -->
- <form id="form1" runat="server" style="margin:0; padding: 0px;">
- <!-- 其它代码 -->
- </form>
- </body>
- </html>
二、用div代替asp.net 自带的form;
js代码:
- //窗口自适应调整
- $(function() {
- windowResize(); //文档载入时加载
- $(window).resize(function() {
- windowResize(); //窗口改变大小时加载
- });
- });
- function windowResize() {
- var width = $(window).width()-10; //减去10与body中margin:5px共同作用:为body留的边距
- var height = $(window).height()-10;
- // $('form#form1').width(width);
- // $('form#form1').height(height);
- // $('form#form1').layout(); //相当于<form id='form1' class='easyui-layout' runat="server">
- $('#autoFitWindow').width(width);
- $('#autoFitWindow').height(height);
- $('#autoFitWindow').layout(); //相当于<form id='form1' class='easyui-layout' runat="server">
- }
aspx代码:
- <html>
- <head>
- <title>test</title>
- <link href="../Public/js/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
- <link href="../Public/js/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
- <script src="../Public/js/jquery-easyui/jquery-1.7.2.min.js" type="text/javascript"> </script>
- <script src="../Public/js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"> </script>
- <script src="../Public/js/WindowAutoFit.js" type="text/javascript"></script>
- </head>
- <body style="margin:5px; padding: 0px;">
- <div id="autoFitWindow" style="margin:0; padding: 0px;">
- <%--其它代码--%>
- </div>
- </body>
- </html>
- easyui Layout 自动适应窗口大小
- 自动适应窗口大小
- 自动适应窗口大小
- easyUI Layout自适应窗口大小
- 自动适应窗口大小 基于jquery
- listCtrl控件自动适应窗口大小
- div+css布局,自动适应窗口大小
- listCtrl控件自动适应窗口大小
- Qt基础 设计自动适应窗口大小
- JQuery EasyUI Layout 在from布局自适应窗口大小
- JS控制网页背景随窗口大小自动适应
- 纯js实现瀑布流(自动适应窗口大小)
- Qt中的布局——自动适应窗口大小
- 网页背景图片自动适应窗口大小的代码
- 图片自动适应大小
- 图片自动适应大小
- dialog 大小自动适应
- 解决easyui-tabs 适应ie窗口大小显示不全的问题
- PLSQL Developer 9.如何设置查询返回所有纪录
- JTAG
- Openfire 抓取packet
- Oracle 函数 Translate 的用法
- UEditor使用快捷键
- easyui Layout 自动适应窗口大小
- Linux下查看CPU信息、机器型号等硬件信息命令
- 连接错误System.Net.Sockets.SocketException:由于系统缓冲区空间不足或列队已满,不能执行套接字上的操作
- Ext文本输入框:Ext.form.TextField属性汇总
- OCX的调试
- STOP BEING AFRAID OF FAILURE - The One Lesson Every Entrepreneur Should Learn
- linux程序与资源管理常用指令
- (转)Android游戏开发之绘制游戏主菜单与进度条加载进度(十三)
- 看代码的感悟