当前位置: 首页 > 编程笔记 >

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

滕璞瑜
2023-03-14
本文向大家介绍JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法,包括了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布局自适应窗口大小的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍rem是如何实现自适应布局的?相关面试题,主要包含被问及rem是如何实现自适应布局的?时的应答技巧和注意事项,需要的朋友参考一下 其大小与设置的html根大小相对 通过js获取当前页面的宽度,动态的调整 html{ font-size: 5px; } 来改变整个页面对应的字体大小

  • Material Design 中的响应式布局适用于任何尺寸的屏幕。自适应 UI 手册包含:保证布局一致性的灵活网格、内容如何在不同屏幕上重绘的断点细节以及关于一个应用如何从小的屏幕缩放到超大屏幕的描述。 断点 为了最优的用户体验,Material 用户界面应该适应如下断点宽度的布局:480、600、840、960、1280、1440 以及 1600 dp。 1.布局中的总结和细节显示内容 600

  • 问题内容: 如何自动缩放HTML5 元素以适合页面? 例如,我可以通过将和属性设置为100%来缩放,但是不会缩放吗? 问题答案: 我相信我已经找到了一个优雅的解决方案: JavaScript CSS 到目前为止,对我没有太大的负面性能影响。

  • 本文向大家介绍微信小程序整个页面的自动适应布局的实现,包括了微信小程序整个页面的自动适应布局的实现的使用技巧和注意事项,需要的朋友参考一下 按比例适应布局 大家有没有过一个烦恼,就是让某个view的高度或者宽度扩大点,而且是要按比例适应不同的手机,遇到这类问题应该怎么办? 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先,我们来说说像素单位rpx,rpx是官方为小程

  • 本文向大家介绍python的tkinter布局之简单的聊天窗口实现方法,包括了python的tkinter布局之简单的聊天窗口实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例展示了一个python的tkinter布局的简单聊天窗口。分享给大家供大家参考之用。具体方法如下: 该实例展示的是一个简单的聊天窗口,可以实现下方输入聊天内容,点击发送,可以增加到上方聊天记录列表中。现在只是“单机”

  • pre { white-space: pre-wrap; } Layout 组件可以内嵌在窗口(window)中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码。jquery-easyui 框架帮我们在后台做渲染和调整尺寸。 作为一个实例,我们创建一个窗口(window),它包含两个部分,一个放置在左边一个放置在右边。在窗口(window)的左边我们创建一个树形菜单(tree),在