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 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
vue中的使用token的方法示例
Mar 10 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python3排序的实例方法
2020/10/20 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
网络研修随笔感言
2014/02/17 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
团日活动总结
2014/04/28 职场文书
聘用意向书
2014/07/29 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA