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布局自适应窗口大小的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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 前一天或后一天的日期
2008/06/28 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python学习数据结构实例代码
2015/05/11 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
利用python实现逐步回归
2020/02/24 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
高一物理教学反思
2014/01/24 职场文书
大四自我鉴定
2014/02/08 职场文书
三方股份合作协议书
2014/10/13 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
投诉书格式范本
2015/07/02 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python