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
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Javascript实现字数统计
Jul 03 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php加密解密实用类分享
2014/01/07 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
IE 当eval遇上function的处理
2011/08/09 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
python实现的简单FTP上传下载文件实例
2015/06/30 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
培训主管的岗位职责
2013/11/23 职场文书
住房公积金接收函
2014/01/09 职场文书
校园公益广告语
2014/03/13 职场文书
精神文明建设标语
2014/06/16 职场文书
放飞理想演讲稿
2014/09/09 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python