宝哥软件园

布局自适应窗口大小中JQuery易用户布局的实现

编辑:宝哥软件园 来源:互联网 时间:2021-10-29

在jQuery EasyUI中,如果布局直接在窗体上,那么在调整窗口大小时布局不会改变,当布局应用到正文时,中间有一个窗体,很难处理。

网上有很多解决方案,通常是在窗口大小变化时编写代码来设置布局。

实验表明,新版本的JQuery易用户界面中的布局可以通过以下方式自动适应大小:

首先设置样式,使html和body的高度为100%(因为form和div的高度设置为100%,所以需要继承上级):

style type='text/css' html,body { height :100%;margin:0 auto} /style那么页面代码如下:

body class=' easui-layout ' form id=' form 1 ' runat=' server ' style=' height :100%;边界:绿色0px固体;region=' center ' div style=' padding-left :30 px;' height:40px'region=' north ' north/div region=' center ' middle/div region=' west ' style=' width :30 px;西部/div分区区域='东部'样式='宽度:40 px;'东/西/形式/身体效果1,小窗口:

效果2,调整大小后:

您可以看到布局会自动适应大小。

注意:测试JQuery EasyUI版本可以从1.3.1开始做,但不能从1.2.6开始做,中间版本还没有尝试过。

以上JQuery易用户布局在自适应窗口大小中的实现方法是边肖分享的全部内容。希望能给大家一个参考,支持我们。

更多资讯
游戏推荐
更多+