编程 Javascript

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布局自适应窗口大小的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 放大镜移动镜片效果代码

May 09 Javascript

jquery和javascript的区别(常用方法比较)

Jul 04 Javascript

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

Dec 14 Javascript

js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析

Dec 27 Javascript

微信小程序之拖拽排序（代码分享）

Jan 21 Javascript

JQuery中Ajax的操作完整例子

Mar 07 Javascript

代码整洁之道(重构)

Oct 25 Javascript

ES6入门教程之变量的解构赋值详解

Apr 13 Javascript

对layer弹出框中icon数字参数的说明介绍

Sep 04 Javascript

详解webpack的文件监听实现(热更新)

Sep 11 Javascript

vue 获取到数据但却渲染不到页面上的解决方法

Nov 19 Vue.js

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

第1次亲密接触PHP5(1)

2006/10/09 PHP

PHP删除特定数组内容并且重建数组索引的方法.

2011/03/25 PHP

PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法

2014/05/04 PHP

PHP中可以自动分割查询字符的Parse_str函数使用示例

2014/07/25 PHP

PHP高手需要要掌握的知识点

2014/08/21 PHP

php实现的替换敏感字符串类实例

2014/09/22 PHP

php自定义apk安装包实例

2014/10/20 PHP

php字符串替换函数substr_replace()用法实例

2015/03/17 PHP

PHP获取毫秒级时间戳的方法

2015/04/15 PHP

PHP curl模拟登录带验证码的网站

2015/11/30 PHP

php 中htmlentities导致中文无法查询问题

2018/09/10 PHP

原生js实现的贪吃蛇网页版游戏完整实例

2015/05/18 Javascript

jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

2015/12/23 Javascript

使用jQuery监听DOM元素大小变化

2016/02/24 Javascript

js去字符串前后空格的实现方法

2016/02/26 Javascript

AngularJS过滤器详解及示例代码

2016/08/16 Javascript

JavaScript函数柯里化原理与用法分析

2017/03/31 Javascript

关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

2017/05/12 Javascript

JS动画定时器知识总结

2018/03/23 Javascript

使用ng-packagr打包Angular的方法示例

2018/09/21 Javascript

JavaScript的Proxy可以做哪些有意思的事儿

2019/06/15 Javascript

使用jquery-easyui的布局layout写后台管理页面的代码详解

2019/06/19 jQuery

[03:34]2014DOTA2西雅图国际邀请赛淘汰赛7月15日TOPPLAY

2014/07/15 DOTA

python网页请求urllib2模块简单封装代码

2014/02/07 Python

Python字典循环添加一键多值的用法实例

2019/01/20 Python

超全Python图像处理讲解(多模块实现)

2020/04/13 Python

Boden美国官网：英伦原创时装品牌

2017/07/03 全球购物

Schutz鞋官方网站：Schutz Shoes

2017/12/13 全球购物

英国鲜花速递：Serenata Flowers

2018/04/03 全球购物

Ellesse英国官网：意大利高级运动品牌

2019/07/23 全球购物

2013的个人自我评价

2013/12/26 职场文书

标准化管理实施方案

2014/02/25 职场文书

学院党的群众路线教育实践活动整改方案

2014/10/04 职场文书

创业不要错过，这4种餐饮新模式

2019/07/18 职场文书

辞职报告（范文三篇）

2019/08/27 职场文书

Go语言编译原理之源码调试

2022/08/05 Golang