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布局自适应窗口大小相关推荐

Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例,编写layout代码: <body class="easyui-layout ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
jQuery easyUI布局（Layout）与手风琴（Accordion）
上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴运用jQuery easyUI是需要引用文件的,详见上一期布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...
jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
EasyUI -- Layout（布局）
第一章介绍 EasyUI – Layout(布局)将布局容器分成了5个区域,分别是:east(东).west(西).south(南).north(北)和center(中).center(中)区域是必 ...
html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
jQuery easyui 1.3.2 在IE8下dialog最大化还原后，layout变乱
这个是jQuery 1.8有些效果在IE8下失效造成的, 用火狐没问题, 换成引用jquery-1.7.2.min.js也没问题, 目前没有空去想解决办法只好降级了,换jQuery easyui 1 ...
网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?
1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height ...
第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

JQuery EasyUI Layout 在from布局自适应窗口大小

JQuery EasyUI Layout 在from布局自适应窗口大小相关推荐

最新文章

热门文章