编程 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中val()方法用法实例

Dec 25 Javascript

完美JQuery图片切换效果的简单实现

Jul 21 Javascript

Node.js开启Https的实践详解

Oct 25 Javascript

weUI应用之JS常用信息提示弹层的封装

Nov 21 Javascript

Jquery Easyui选项卡组件Tab使用详解（10）

Dec 18 Javascript

工厂模式在JS中的实践

Jan 18 Javascript

利用n工具轻松管理Node.js的版本

Apr 21 Javascript

js原生日历的实例(推荐)

Oct 31 Javascript

angular中不同的组件间传值与通信的方法

Nov 04 Javascript

Javascript 编码约定(编码规范)

Mar 11 Javascript

实例介绍JavaScript中多种组合继承

Jan 20 Javascript

Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法

Sep 04 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