编程 Javascript

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

Posted in Javascript onMay 28, 2016

在jQuery EasyUI中，如果直接在form上布局时当窗口大小调整布局不会改变，将布局应用于body时中间隔着一个form，横竖不好弄。

网上有多个解决方案，一般都是写代码，在窗口大小改变时设置布局。

经实验，新版本的JQuery EasyUI中布局可以采用以下方式来达到自动适应大小：

首先设置样式，使html和body高度为100%（因form和div高度设置为100%需要继承上级）：

<style type="text/css">
    html,body
    {
      height:100%;
      margin:0 auto;
    }
  </style>

然后页面代码如下：

<body class="easyui-layout">
  <form id="form1" runat="server" style="height:100%; border:green 0px solid;" region="center">
  <div style="padding-left:30px; height:40px;" region="north">北</div>
  <div region="center">中间</div>
  <div region="west" style="width:30px;">West</div>
  <div region="east" style="width:40px;">East</div>
  </form>
</body>

效果1，小窗口：

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

效果2，调整大小后：

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

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

备注：测试JQuery EasyUI版本从1.3.1可以，1.2.6不可以，中间的没有试过

以上这篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

Jun 19 Javascript

Dojo 学习要点

Sep 03 Javascript

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

Feb 23 Javascript

3款实用的在线JS代码工具(国外)

Mar 15 Javascript

node.js中的fs.writeFile方法使用说明

Dec 14 Javascript

JQuery中DOM事件合成用法实例分析

Jun 13 Javascript

详解AngularJS过滤器的使用

Mar 11 Javascript

基于JS实现回到页面顶部的五种写法(从实现到增强)

Sep 03 Javascript

基于JavaScript实现屏幕滚动效果

Jan 18 Javascript

JS实现侧边栏鼠标经过弹出框+缓冲效果

Mar 29 Javascript

详解如何在项目中使用jest测试react native组件

Feb 09 Javascript

JavaScript 对引擎、运行时、调用堆栈的概述理解

Oct 22 Javascript

jQuery操作动态生成的内容的方法

May 28 #Javascript

javascript 用函数实现继承详解

May 28 #Javascript

jQuery控制li上下循环滚动插件用法实例(附demo源码下载)

May 28 #Javascript

jQuery实现布局高宽自适应的简单实例

May 28 #Javascript

jquery mobile界面数据刷新的实现方法

May 28 #Javascript

jquery自适应布局的简单实例

May 28 #Javascript

JQuery Mobile 弹出式登录框的实现方法

May 28 #Javascript

You might like

如何在PHP中使用Oracle数据库(1)

2006/10/09 PHP

一个PHP+MSSQL分页的例子

2006/10/09 PHP

php图像处理函数大全(推荐收藏)

2013/07/11 PHP

PHP实现图片的等比缩放和Logo水印功能示例

2017/05/04 PHP

jquery入门必备的基本认识及实例(整理)

2013/06/24 Javascript

js格式化时间和js格式化时间戳示例

2014/02/10 Javascript

jquery中ajax函数执行顺序问题之如何设置同步

2014/02/28 Javascript

javascript如何判断输入的url是否正确

2014/04/11 Javascript

将form表单中的元素转换成对象的方法适用表单提交

2014/05/02 Javascript

使用AngularJS制作一个简单的RSS阅读器的教程

2015/06/18 Javascript

JS简单实现多级Select联动菜单效果代码

2015/09/06 Javascript

JavaScript Split()方法

2015/12/18 Javascript

实例讲解jquery中mouseleave和mouseout的区别

2016/02/17 Javascript

javascript表单事件处理方法详解

2016/05/15 Javascript

微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

2016/12/14 Javascript

基于Bootstrap框架实现图片切换

2017/03/10 Javascript

layui获取选中行数据的实例讲解

2018/08/19 Javascript

使用Vuex解决Vue中的身份验证问题

2018/09/28 Javascript

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

2020/08/12 Javascript

[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路

2017/07/03 DOTA

[02:51]2018年度DOTA2最佳中单位选手-完美盛典

2018/12/17 DOTA

深入学习Python中的装饰器使用

2016/06/20 Python

用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例

2017/12/14 Python

python os用法总结

2018/06/08 Python

python网络爬虫 CrawlSpider使用详解

2019/09/27 Python

python pygame实现挡板弹球游戏

2019/11/25 Python

python 串口读取+存储+输出处理实例

2019/12/26 Python

jupyter notebook tensorflow打印device信息实例

2020/04/20 Python

Html5游戏开发之乒乓Ping Pong游戏示例(三)

2013/01/21 HTML / CSS

AmazeUI 折叠面板的实现代码

2020/08/17 HTML / CSS

全天然狗零食：Best Bully Sticks

2016/09/22 全球购物

六月份红领巾广播稿

2014/02/03 职场文书

汽车促销活动方案

2014/03/31 职场文书

工作失误检讨书

2015/01/26 职场文书

时尚女魔头观后感

2015/06/04 职场文书

pytorch中Schedule与warmup_steps的用法说明

2021/05/24 Python