easyui使用layou时自适应窗口

最新推荐文章于 2021-04-16 17:01:15 发布

great-sage

最新推荐文章于 2021-04-16 17:01:15 发布

阅读量1.1w

点赞数

分类专栏： JavaEE/Java js/jQuery/html/css C#/.net 文章标签： stylesheet function server reference

本文链接：https://blog.csdn.net/thinkscape/article/details/7613320

版权

JavaEE/Java 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

C#/.net

48 篇文章 0 订阅

订阅专栏

js/jQuery/html/css

41 篇文章 0 订阅

订阅专栏

(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>