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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
iview实现图片上传功能
Jun 29 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 GD绘制24小时柱状图
2008/06/28 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
python 运算符 供重载参考
2009/06/11 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
django model通过字典更新数据实例
2020/04/01 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
迎新晚会主持词
2014/03/24 职场文书
交通安全标语
2014/06/06 职场文书
晚会闭幕词
2015/01/28 职场文书
爱国影片观后感
2015/06/18 职场文书
解除合同协议书范本
2016/03/21 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android