easyui放到aspx里面出现问题的解决方案

最新推荐文章于 2024-06-17 15:26:27 发布

slowlifes

最新推荐文章于 2024-06-17 15:26:27 发布

阅读量2.6k

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

(选用easyui框架一定要谨慎，2012-10-12注)

也没什么,只是一个小小的应用

一、使用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 plain copy print ?

/// <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">
}

/// <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 plain copy print ?

<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;">
<form id="form1" runat="server" style="margin:0; padding: 0px;">
</form>
</body>
</html>

<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 plain copy print ?

//窗口自适应调整
$(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">
}

//窗口自适应调整    
$(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 plain copy print ?

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

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

slowlifes

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
easyui放到aspx里面出现问题的解决方案

(选用easyui框架一定要谨慎，2012-10-12注)也没什么,只是一个小小的应用一、使用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
复制链接

扫一扫

专栏目录