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

基于jquery的15款幻灯片插件

Apr 10 Javascript

jQuery实现图片信息的浮动显示实例代码

Aug 28 Javascript

javascript和jquery实现用户登录验证

May 04 Javascript

jQuery实现左侧导航模块的显示与隐藏效果

Jul 04 Javascript

jQuery插件zTree实现的基本树与节点获取操作示例

Mar 08 Javascript

神级程序员JavaScript300行代码搞定汉字转拼音

May 20 Javascript

js评分组件使用详解

Jun 06 Javascript

jQuery封装animate.css的实例

Jan 04 jQuery

详解如何在webpack中做预渲染降低首屏空白时间

Aug 22 Javascript

Vue自定义指令写法与个人理解

Feb 09 Javascript

bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

Jul 09 Javascript

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

Aug 16 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超大文件下载,断点续传下载的方法详解

2013/06/06 PHP

PHP类的声明与实例化及构造方法与析构方法详解

2016/01/26 PHP

php+jQuery+Ajax简单实现页面异步刷新

2016/08/08 PHP

浅谈PHP表单提交(POST&GET&URL编/解码)

2017/04/03 PHP

php实现姓名根据首字母排序的类与方法(实例代码)

2018/05/16 PHP

js 颜色选择器（兼容firefox）

2009/03/05 Javascript

读jQuery之六缓存数据功能介绍

2011/06/21 Javascript

setTimeout()与setInterval()方法区别介绍

2013/12/24 Javascript

jQuery EasyUI实现右键菜单变灰不可用效果

2015/09/24 Javascript

详解JavaScript中localStorage使用要点

2016/01/13 Javascript

JavaScript中的冒泡排序法

2016/08/03 Javascript

jQuery+CSS3实现四种应用广泛的导航条制作实例详解

2016/09/17 Javascript

基于javaScript的this指向总结

2017/07/22 Javascript

nodejs实现简单的gulp打包

2017/12/21 NodeJs

vue使用自定义icon图标的方法

2018/05/14 Javascript

AngularJS 事件发布机制

2018/08/28 Javascript

微信小程序项目总结之记账小程序功能的实现（包括后端）

2019/08/20 Javascript

如何利用node转发请求详解

2020/09/17 Javascript

[02:42]完美大师赛主赛事淘汰赛第三日观众采访

2017/11/25 DOTA

[01:20:05]DOTA2-DPC中国联赛正赛 Ehome vs VG BO3 第二场 2月5日

2021/03/11 DOTA

PHP网页抓取之抓取百度贴吧邮箱数据代码分享

2016/04/13 Python

python开发环境PyScripter中文乱码问题解决方案

2016/09/11 Python

Python中取整的几种方法小结

2017/01/06 Python

Python中elasticsearch插入和更新数据的实现方法

2018/04/01 Python

centos 安装Python3 及对应的pip教程详解

2019/06/28 Python

python基础教程之while循环

2019/08/14 Python

Anaconda的安装与虚拟环境建立

2020/11/18 Python

html5-Canvas可以在web中绘制各种图形

2012/12/26 HTML / CSS

HTML5实现页面切换激活的PageVisibility API使用初探

2016/05/13 HTML / CSS

What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)

2013/09/10 面试题

党员承诺书范文

2014/05/19 职场文书

2016春节家属慰问信

2015/03/25 职场文书

中学生社会实践教育活动总结

2015/05/06 职场文书

初中家长意见

2015/06/03 职场文书

致运动员加油稿

2015/07/21 职场文书

教师节祝酒词

2015/08/11 职场文书