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 相关文章推荐
js取模(求余数)隔行变色
May 15 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python 多进程和数据传递的理解
2017/10/09 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python3实现单目标粒子群算法
2019/11/14 Python
python实现交并比IOU教程
2020/04/16 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
Linux内核产生并发的原因
2012/07/13 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
求职毕业生自荐书
2014/02/08 职场文书
美食节目策划方案
2014/05/31 职场文书
六查六看剖析材料
2014/10/06 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript