编程 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 相关文章推荐

js如何设置在iframe框架中指定div不显示

Dec 04 Javascript

js兼容火狐显示上传图片预览效果的方法

May 21 Javascript

jquery+CSS3模拟Path2.0动画菜单效果代码

Aug 31 Javascript

jQuery模仿单选按钮选中效果

Jun 24 Javascript

深入理解JS DOM事件机制

Aug 06 Javascript

bootstrap配合Masonry插件实现瀑布式布局

Jan 18 Javascript

jquery表单验证实例仿Toast提示效果

Mar 03 Javascript

Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

Jul 19 Javascript

angular实现input输入监听的示例

Aug 31 Javascript

JS实现简单的点赞与踩功能示例

Dec 05 Javascript

微信小程序获取复选框全选反选选中的值(实例代码)

Dec 17 Javascript

js对象简介与基本用法示例

Mar 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法

2011/08/22 PHP

基于PHP的简单采集数据入库程序

2014/07/30 PHP

Javascript MD4

2006/12/20 Javascript

JavaScript 面向对象编程（2）定义类

2010/05/18 Javascript

浅析JS中document对象的一些重要属性

2014/03/06 Javascript

javascript 中__proto__和prototype详解

2014/11/25 Javascript

jQuery的图片滑块焦点图插件整理推荐

2014/12/07 Javascript

浅谈javascript 函数属性和方法

2015/01/21 Javascript

JavaScript中的parse()方法使用简介

2015/06/12 Javascript

jquery.form.js框架实现文件上传功能案例解析（springmvc）

2016/05/26 Javascript

JS使用单链表统计英语单词出现次数

2016/06/16 Javascript

让html元素随浏览器的大小自适应垂直居中的实现方法

2016/10/12 Javascript

jquery实现下拉框左右选择功能

2017/02/21 Javascript

React.js中常用的ES6写法总结（推荐）

2017/05/09 Javascript

Bootstrap Table 删除和批量删除

2017/09/22 Javascript

react中实现搜索结果中关键词高亮显示

2018/07/31 Javascript

Django模板继承 extend标签实例代码详解

2019/05/16 Javascript

Element实现表格嵌套、多个表格共用一个表头的方法

2020/05/09 Javascript

VUE中setTimeout和setInterval自动销毁案例

2020/09/07 Javascript

python anaconda 安装环境变量升级以及特殊库安装的方法

2017/06/21 Python

提升Python效率之使用循环机制代替递归函数

2019/07/23 Python

python元组的概念知识点

2019/11/19 Python

Pygame框架实现飞机大战

2020/08/07 Python

class类在python中获取金融数据的实例方法

2020/12/10 Python

详解CSS3 Media Queries中媒体属性的使用

2016/02/29 HTML / CSS

Perry Ellis官网：美国男士品味服装

2016/12/09 全球购物

Beach Bunny Swimwear官网：设计师泳装和性感比基尼

2019/03/13 全球购物

英国著名的美容护肤和护发产品购物网站：Lookfantastic

2020/11/23 全球购物

花店创业计划书范文

2014/02/07 职场文书

中小学校园安全广播稿

2014/09/29 职场文书

房屋租赁协议书（标准版）

2014/10/02 职场文书

2014年房地产销售工作总结

2014/12/01 职场文书

2014学生会工作总结报告

2014/12/02 职场文书

2015年三八妇女节活动总结

2015/02/06 职场文书

机关工会工作总结2015

2015/05/26 职场文书

python实现双链表

2022/05/25 Python