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实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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的历史和优缺点
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
取选中的radio的值
2010/01/11 Javascript
7个JS基础知识总结
2014/03/05 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python实现的下载网页源码功能示例
2017/06/13 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
英语系毕业生自荐信
2013/10/31 职场文书
单位创先争优活动方案
2014/01/26 职场文书
综治宣传月活动总结
2014/04/28 职场文书
房地产广告策划方案
2014/05/15 职场文书
李白故里导游词
2015/02/12 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
党校学习个人总结
2015/02/15 职场文书
教师岗位职责范本
2015/04/02 职场文书
灵魂歌王观后感
2015/06/17 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python