在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，小窗口：

效果2，调整大小后：

可以看到布局会自动适应大小了

备注：测试JQuery EasyUI版本从1.3.1可以，1.2.6不可以，中间的没有试过

JQuery EasyUI Layout 在from布局自适应窗口大小的更多相关文章

  1. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  2. 雷林鹏分享：jQuery EasyUI 窗口 - 窗口与布局

    jQuery EasyUI 窗口 - 窗口与布局 Layout 组件可以内嵌在窗口(window)中.我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码.jquery-easyui 框架帮 ...

  3. jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined

    1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  5. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  6. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  7. jQuery EasyUI API 中文文档 - 布局（Layout）

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  8. Jquery EasyUi实战教程布局篇

    转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...

  9. jQuery EasyUI API - Layout - Layout[原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

随机推荐

  1. Android性能优化-减小图片下载大小

    原文链接 https://developer.android.com/topic/performance/network-xfer.html 内容概要 理解图片的格式 PNG JPG WebP 如何选 ...

  2. jdbctemplate 获取数据表结构的方法&注意事项

    方法一 直接查询: SqlRowSet srcSqlRowSet = srcJdbcTemplate.queryForRowSet("SELECT * FROM tablename LIMI ...

  3. Lintcode 730 所有子集的和

    已知: 给一整数 n, 我们需要求前n个自然数形成的集合的所有可能子集中所有元素的和. 示例: 给出 n = , 返回 可能的子集为 {{}, {}, {, }}. 子集的元素和为 + + + = 给 ...

  4. .NET 同步与异步 之 原子操作和自旋锁（Interlocked、SpinLock）（九）

    本随笔续接:.NET 同步与异步之锁(ReaderWriterLockSlim)(八) 之前的随笔已经说过.加锁虽然能很好的解决竞争条件,但也带来了负面影响:性能方面的负面影响.那有没有更好的解决方案 ...

  5. Socket网络编程--聊天程序(3)

    上一小节,已经讲到可以每个人多说话,而且还没有限制,简单的来说,我们已经完成了聊天的功能了,那么接下来我们要实现什么功能呢?一个聊天程序至少应该支持一对多的通讯吧,接下来就实现多个客户端往服务器发送数 ...

  6. pycharm开发python利器入门

    内容包含:pycharm学习技巧 Learning tips.PyCharm3.0默认快捷键(翻译的).pycharm常用设置.pycharm环境和路径配置.Pycharm实用拓展功能:pycharm ...

  7. TinyXML2 的使用

    TinyXML是一个开源的解析XML的解析库,能够用于C++,能够在Windows或Linux中编译.这个解析库的模型通过解析XML文件,然后在内存中生成DOM模型,从而让我们很方便的遍历这棵XML树 ...

  8. 将png图片转换为字体图标

    字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用N多的图片,发送请求造成的流量浪费,因此,我们可以将图标的icon转换成字体图标: 方法一: 1.将png格式的图片转换成svg格式: 网 ...

  9. LeetCode: Find Peak Element 解题报告

    Find Peak Element A peak element is an element that is greater than its neighbors. Given an input ar ...

  10. jupyter修改根目录

    找到jupyter的快捷方式,然后修改目标: 首先在快捷方式上右键单击,选择属性: 然后将目标那里替换自己想要的目录: 网上有的教程说保留%USERPROFILE%,其实这是受系统对路径解析的影响的. ...