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

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

二、用div代替asp.net 自帶的form；

js程式碼：

[javascript] view plain copy

//視窗自適應調整
$(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

<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 自動適應視窗大小

(2012-04-17注:easyui新版本layout已經有fit屬性,不用這麼麻煩) 一個小小的應用一、使用asp.net 自帶的form；二、用div代替asp.net 自帶的form；開發工具：VS2008 框架：jquery-easyui-1.

easyUI Layout自適應視窗大小

</pre><p>關於頁面自適應效果</p><p><pre name="code" class="javascript">//監聽視窗大小變

Qt基礎設計自動適應視窗大小

實際qt視窗程式的時候,為了方便和程式本身能自適應顯示裝置,我們一般都要把控制元件設計為可以隨視窗大小的改變而改變,在使用設計助手設計的介面,預設是不能隨視窗大小改變而改變的,只需做一下簡單處理即可.一下是轉載前輩們的部落格. 轉載地址:http://www.cn

JQuery EasyUI Layout 在from佈局自適應視窗大小

在JQuery EasyUI中，如果直接在form上佈局時當視窗大小調整佈局不會改變，將佈局應用於body時中間隔著一個form，橫豎不好弄。網上有多個解決方案，一般都是寫程式碼，在視窗大小改變時設定佈局。經實驗，新版本的JQuery EasyUI中佈局可以採用以下方

如何使圖片尺寸自動適應視窗，隨視窗大小變化而變化

程式碼如下： <img src="{{ url_for('static', filename=picture.piclink) }}" alt=""

使背景圖片自動適應窗體大小

實現效果：　　知識運用：　　窗體的BackgroundImage和BackgroundImageLayout屬性　　public virtual Image BackgroundImage{get; set;}　　　　//屬性值　一個Image影象　　 public virtu

QT程式自適應視窗大小

作為QT菜鳥的一員，總是容易遇到各種問題，然後歷經千辛萬苦解決它問題：我的程式需要在ARM板（Linux系統）上跑，也需要在PC（Windows上）跑，他們擁有不同大小的螢幕在程式中佈局的介面能夠很好地適應視窗的大小變化，但是在UI設計中則不能實現原因：在UI設計中沒有進

QGraphicsView使影象自適應視窗大小

fd=QFileDialog(self) filePath=fd.getOpenFileName()[0] item=QGraphicsPixmapItem(QPixmap(filePath)) scene=QGraphicsScene() scene.addItem

選項卡Tabs 設定自適應視窗大小

$(window).resize(function() { //"_tabs" 為easyui-tabs的id $('#_tabs').tabs({ width : $

使lightbox2 的彈出的大圖片自動適應螢幕大小

Resize the image to the screen: lightbox.js: preloader.onload = function() { $image.attr('src', _this.album[_this.currentImageIndex].link); $image.width

Echarts 如何設定多個圖表自適應視窗大小

最近做了Echarts的一些東西碰到一個很實際的問題那就是如何使Echarts圖表能自適應視窗的大小由於我一個頁面里加載了四個圖所以用一般的 window.onresize = myCha

一個頁面存在多個echarts圖形,resize失效，圖形自適應視窗大小

當一個頁面有兩個echarts圖形，想要頁面大小發生改變，重新繪製圖形如果還寫為 myChart.se

11three.js自適應視窗大小

新增一個監控事件 window.addEventListener image.png function onResize() {

Qt Creator 窗體控制元件自適應視窗大小布局

常見的軟體視窗大小改變（最大化、手動改變時）需要視窗的部件能夠自適應佈局，而在Qt的應用程式介面設計中，對於像我一樣的初學者如何實現視窗自適應調整還是要繞點彎路的。網上百度了很多，多數說的很含糊，還有很多是用程式實現的，既然已經有Qt Creator那麼高整合度的工具了，我還是傾向於直接在Qt Crea

window.onload and showModalDialog根據內容自動調整視窗大小

1 showModalDialog根據內容自動調整視窗大小 :在對話方塊的頁面中加入如下程式碼： window.onload = function() { if( document.body.scrollWidth > (window.screen.ava

Qt中窗體控制元件按照比例縮放，自適應視窗大小進行佈局

最近在做本科畢設，用到了Qt，無奈本人實在是太過於小白了，很多東西都進行了很久的探索，比如今天說到的窗體控制元件佈局...一把辛酸淚首先就是建立一個GUI檔案，然後進行UI設計，這裡就只需要從左邊進行拖拽，這個很easy啦... 然後對其進行佈局

echarts學習總結（二）：一個頁面存在多個echarts圖形，圖形自適應視窗大小

如上圖所示一個頁面有兩個echarts圖形：散點圖和折線圖，如果還寫為 myChart.setOption(option); window.onresize = myChart.resize; 則只有

PyQt5 QTableWidget（表單控制元件）自適應視窗大小、欄位大小調整及佈局（一）

目錄前言前言還好，我有C++ Qt Help（幫助文件）O(∩_∩)O哈哈~ 本文旨在介紹QTableWidget（表單控制元件）的自適應視窗大小、欄位大小調整及佈局。用QtDesigner設計UI 1. 先用QtDe

VMware Workstation 14 Pro 設定自動調整視窗大小

VMware中安裝虛擬機器後，視窗太小，如何設定自動調整視窗大小吶？開啟VMware Workstation，點選”檢視”>”自動調整大小”，選中”自動適應客戶機”、”自動適應視窗”

java的JDesktopPane背景圖片自適應視窗大小示例

import java.awt.BorderLayout; import java.awt.Image; import java.awt.event.ComponentAdapter; import java.awt.event.ComponentEvent; import

easyui Layout 自動適應視窗大小

相關推薦