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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
document.write的几点使用心得
May 14 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
javascript实现表单验证
Jan 29 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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的类树(支持无限分类)
2006/10/09 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python 美化输出信息的实例
2018/10/15 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
大学生实习自我鉴定
2013/12/11 职场文书
收银员岗位职责
2014/02/07 职场文书
三好学生评语大全
2014/12/29 职场文书
乌镇导游词
2015/02/02 职场文书
人事专员岗位职责
2015/02/03 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
创业计划书之物流运送
2019/09/17 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python