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

 更新时间:2016年05月28日 10:34:52   投稿:jingxian  
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

相关文章

  • 如何编写jquery插件

    如何编写jquery插件

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件
    2017-03-03
  • jQuery表单校验插件validator使用方法详解

    jQuery表单校验插件validator使用方法详解

    这篇文章主要为大家详细介绍了jQuery表单校验插件validator的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Jquery 一次处理多个ajax请求的代码

    Jquery 一次处理多个ajax请求的代码

    Jquery 一次处理多个ajax请求的代码,需要的朋友可以参考下。
    2011-09-09
  • JQuery选择器特辑 详细小结

    JQuery选择器特辑 详细小结

    Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器
    2012-05-05
  • qTip2 精致的基于jQuery提示信息插件

    qTip2 精致的基于jQuery提示信息插件

    qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用
    2012-02-02
  • JQuery 拾色器插件发布-jquery.icolor.js

    JQuery 拾色器插件发布-jquery.icolor.js

    web项目中不少地方需要用到颜色选择器,比如设置某个元素的背景色、边框色等等,按照我们交互设计的期望-设色器最好简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值。
    2010-10-10
  • 使用jQuery实现input数值增量和减量的方法

    使用jQuery实现input数值增量和减量的方法

    这篇文章主要介绍了使用jQuery实现input数值增量和减量的方法,实例分析了Bootstrap TouchSpin插件的用法,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 浅谈Jquery中Ajax异步请求中的async参数的作用

    浅谈Jquery中Ajax异步请求中的async参数的作用

    下面小编就为大家带来一篇浅谈Jquery中Ajax异步请求中的async参数的作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Jquery AJAX 框架的使用方法

    Jquery AJAX 框架的使用方法

    AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。
    2009-11-11
  • jQuery实现可拖动进度条实例代码

    jQuery实现可拖动进度条实例代码

    这篇文章主要介绍了jQuery实现可拖动进度条实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06

最新评论