easyui Layout 自动适应窗口大小

最新推荐文章于 2022-04-05 21:02:53 发布

slowlifes

最新推荐文章于 2022-04-05 21:02:53 发布

阅读量3.7k

点赞数

分类专栏： Javascript JQuery

Javascript 同时被 2 个专栏收录

61 篇文章

订阅专栏

JQuery

31 篇文章

订阅专栏

本文介绍了在ASP.NET中使用EasyUI布局组件的两种方法：一种是将布局应用于默认的form元素，另一种是使用div替代form。文中详细描述了如何通过JavaScript使布局随窗口大小变化而自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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

[javascript]view plaincopy 
   
 /// <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]view plaincopy 
   
 <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代码：

[javascript]view plaincopy 
   
 //窗口自适应调整      
 $(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代码：

[javascript]view plaincopy 
   
 <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>  