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+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jquery禁用右键示例
Apr 28 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
js 两数组去除重复数值的实例
Dec 06 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
javascript实现数字时钟效果
Feb 06 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与paypal整合方法
2010/11/28 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python人人网登录应用实例
2014/09/26 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python微信公众号开发平台
2018/01/25 Python
python3实现windows下同名进程监控
2018/06/21 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
基于PyTorch中view的用法说明
2021/03/03 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
企业申诉管理制度
2014/01/30 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
学习党章心得体会2016
2016/01/15 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
工作简历的自我评价
2019/05/16 职场文书