easyui Layout 自動適應視窗大小
阿新 • • 發佈:2018-12-23
(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>
- <headrunat="server">
- <title>Test</title>
- <scripttype="text/javascript"src="../Public/js/FusionCharts.js"></script>
- <linkhref="../Public/js/jquery-easyui/themes/default/easyui.css"rel="stylesheet"type="text/css"/>
- <linkhref="../Public/js/jquery-easyui/themes/icon.css"rel="stylesheet"type="text/css"/>
- <scriptsrc="../Public/js/jquery-easyui/jquery-1.7.2.min.js"type="text/javascript"></script>
- <scriptsrc="../Public/js/jquery-easyui/jquery.easyui.min.js"type="text/javascript"></script>
- <scriptsrc="../Public/js/WindowAutoFit.js"type="text/javascript"></script>
- <scriptsrc="../Public/js/ImtTrade.js"type="text/javascript"></script>
- </head>
- <bodystyle="margin:5px; padding: 0px;">
- <!-- class="easyui-layout"由js檔案放到form中 -->
- <formid="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>