jQuery easyui layout布局自适应浏览器大小

首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化、还原窗口的时候,layout的某个区域不能填充因为浏览器扩大而产 生的空白区域,这时候看起来就比较别扭了。当然了,如果你的layout是直接放在body标签上的,且没有嵌套的layout的话,是不会出现 layout不能自适应大小的情况的。

当布局比较复杂,势必就会要layout嵌套起来使用,这时候出现的页面不能自适应大小的情况就让我不能忍受,这个问题困扰了我几天时间,好在有万 能的网络,问题总会得到解决,下面就将自己这两天查资料以及自己实践的经验介绍给大家,希望对以后遇到同样问题的朋友有所帮助。但是此处并不做深入分析, 因为我也不熟悉jQuery和easyui。

先写一个有嵌套的layout,父级基于body,包含north,center,west,east,south五个区域,子级layout基于父级的center区域,如果你打开页面的时候,浏览器不是最大化,然后手工调整浏览器大小,就会发现问题所在,点击此处查看演示。

其实,layout继承自panel,而panel有个fit属性,只要设置为true,layout就能自适应父元素的大小而变化,所以只要加上fit=”true”基本就可以解决问题,点击此处查看演示,相对于不能自适应的情况,变动的代码只有下面一行:

1 

这种解决方案应该是最简单的了,不过在非IE浏览器下面,大家可能会发现,反复调整浏览器大小,特别是缩小浏览器的时候,子级的layout就会出 现滚动条,一时半会儿也没查出是什么原因导致的。所以网上还有一种较为复杂的解决方案,那就是利用jQuery的resize事件对浏览器窗口监听,当浏 览器被调整时重新设置某些页面元素大小,要自适应大小的话,只要设置成跟父元素同宽就可以了,下面是JS代码:

01var settime = null;
02function redraw(){
03$('#wrap').layout('resize');
04$('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()});
05$('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()});
06$('#subWrap').layout('resize');
07}
08$(function(){
09$(window).resize(function(){
10if(settime != null)
11clearTimeout(settime);
12settime=setTimeout("redraw()",100);
13});
14var p1 = $('body').layout('panel','west').panel({
15onCollapse:function(){
16if(settime != null)
17clearTimeout(settime);
18settime=setTimeout("redraw()",100);
19},
20onExpand:function(){
21if(settime != null)
22clearTimeout(settime);
23settime=setTimeout("redraw()",100);
24},
25onResize:function(width,height){
26if(settime != null)
27clearTimeout(settime);
28settime=setTimeout("redraw()",100);
29}
30});
31var p2 = $('body').layout('panel','east').panel({
32onCollapse:function(){
33if(settime != null)
34clearTimeout(settime);
35settime=setTimeout("redraw()",100);
36},
37onExpand:function(){
38if(settime != null)
39clearTimeout(settime);
40settime=setTimeout("redraw()",100);
41},
42onResize:function(width,height){
43if(settime != null)
44clearTimeout(settime);
45settime=setTimeout("redraw()",100);
46}
47});
48});

当然了,用jQuery的resize监听对于这样的页面还是不够,因为当我,展开活收缩父级layout的west和east区域,或是是拉动 west和est与center之间的split调整大小的时候,子级的layout依旧会出现不能自动填充的情况,所以对于这些事件,统统需要捕捉处理 子级layout的布局问题,这也是我上面的js代码为何出了监听window的resize事件外还监听了其它几个事件的原因,相当麻烦?如果有更好的 解决方案,欢迎大家提出来。最后调整好的页面演示在这里

2011年11月13号更新:

使用子级layout使用fit=’true’的属性后,基本可以使页面保持自适应,就是在非IE浏览器下面,拉伸浏览器后,再还原包含子级 layout的region便会含有滚动条。为了解决这个滚动条问题使用了jquery的resize事件,其实在不必这么大费周折,只要让包含自己 layout的region上使用overflow:hidden就可以了,这也算个折中而简单的解决方案吧。
演示页面看这里

转载于:https://www.cnblogs.com/shihao/archive/2012/05/07/2489368.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA 作业:图形界面

自己动手写的一个小JAVA 程序: 一个学生管理小系统,虽然很挫,但是这我学JAVA的第一步。学了2天JAVA没有白费! 1 import java.awt.*;2 import java.awt.event.*;3 import java.util.ArrayList;4 5 import javax.swing.*;6 7 class …

一、Pytorch对自定义表达式自动求导

例如:y ax bx c,分别对a,b,c求导 若当a3,b4,c5,x1时 import torch from torch import autogradx torch.tensor(1.) a torch.tensor(3.,requires_gradTrue) b torch.tensor(4.,requires…

css菜单下拉菜单_在CSS中创建下拉菜单

css菜单下拉菜单CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation bar on our webpage, we know the importance of a list of items too on our webpage but what is the importance of dropdown in web pages?…

C++ 内存基本构件new/delete的意义、运用方式以及重载方式

目录一、对new的理解1、new做了什么2、new被编译器转为了什么3、operate_new源代码长啥样二、对delete的理解1、delete做了什么2、delete被编译器转为了什么3、operator delete源代码长啥样三、构造函数与析构函数的直接调用参考一、对new的理解 1、new做了什么 C告诉我们&am…

二、线性代数

一、张量 张量表示由一个数值组成的数组,这个数组可能有多个维度 import torchx torch.arange(15) x # tensor([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])1,shape shape属性可以访问张量的形状 x.shape # torch.Size([15])2&a…

Wordpress prettyPhoto插件跨站脚本漏洞

漏洞名称:Wordpress prettyPhoto插件跨站脚本漏洞CNNVD编号:CNNVD-201311-413发布时间:2013-11-28更新时间:2013-11-28危害等级: 漏洞类型:跨站脚本威胁类型:远程CVE编号: 漏洞来源…

JavaScript学习笔记1

Netscape 公司 DOM模型&#xff0c;层(layer)-用ID标识。 HTML标记页面上的元素&#xff0c; <div id "mydiv">This is my div</div> CSS为这个页面元素定位 #mydiv{ position:absolute; left:320px; top:110px; } JavaScript 访问 (DOM模块不同&#x…

c# 中关键字_C#中的“使用”关键字

c# 中关键字Prerequisite: Namespace in C# 先决条件&#xff1a; C&#xff03;中的命名空间 If you want to include namespace in a program then we need to use using keyword. For example we use Console class which is defined in System namespace that’s why we n…

C++ 内存基本构件new [] /delete []的意义、内存泄漏原因、VC下cookie的基本布局

目录一、对new [] delete [] 的理解1、delete的[]遗漏会带来什么影响二、以示例探讨三、cookie的理解一、对new [] delete [] 的理解 new的对象是个array类型的。 Complex* pca new Complex[3]; //唤起三次ctor //无法借由参数给予初值 ... delete[] pca; //唤起3次dtor如下…

OpenJudge计算概论-找出第k大的数

/* 找出第k大的数 总时间限制: 1000ms 内存限制: 1000kB 描述 用户输入N和K&#xff0c;然后接着输入N个正整数&#xff08;无序的&#xff09;&#xff0c;程序在不对N个整数排序的情况下&#xff0c;找出第K大的数。注意&#xff0c;第K大的数意味着从大到小排在第K位的数。并…

01背包怎么不重复_带有重复物品的背包

01背包怎么不重复Problem statement: 问题陈述&#xff1a; Weights and values are given for n items along with the maximum capacity allowed W. What is the maximum value we can achieve if we can pick any weights, any number of times for the total allowed capa…

jQuery数组处理汇总

有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下 $.each(array, [callback])遍历,很常用 ?12345678var arr [javascript, php, java, c, c#, perl, vb, html, css, objective-c];$.each(arr, function(key, val) {// firebug consoleconsole.log(index …

C++ 内存基本构件 placement new

用法以及编译器解释 placement new 允许我们将object构建于已经分配的内存上。(所以此时必须有个指针指向已经分配好的内存) 没有所谓的placement delete &#xff0c;因为placement new根本没有分配内存. 也有种说法&#xff0c;是将placement new对应的内存释放掉的操作为pl…

二维数组for遍历

<?php$conarray(array(1,高某,A公司,北京市,010,abc),array(2,罗某,B公司,天津市,020,bcd),array(3,冯某,C公司,上海市,021,cdf),array(4,书某,D公司,重庆市,022,dfg));echo <table border"1" width"600" align"center">;echo <cap…

Xcode调试相关小结

一.设置NSZombieEnabled 使用NSZombieEnabled功能,当代码中访问已经释放了内存的地方,会给你下面这样的提示,而不仅仅是EXEC_BAD_ACCESS: 2008-10-03 18:10:39.933 HelloWorld[1026:20b] *** -[GSFont ascender]: message sent to deallocated instance 0x126550 如果要查看上面…

ONGC的完整形式是什么?

ONGC&#xff1a;石油天然气公司 (ONGC: Oil and Natural Gas Corporation) ONGC is an abbreviation of Oil and Natural Gas Corporation. It is an Indian multinational corporation that is one of the leading producers of crude oil and natural gas in India. Its hea…

C/C++代码优化方法

目录优化概述_O0优化_O1优化_O2优化_O3优化volatile关键字避免优化优化概述 如果将未经优化的C语言程序直接运行会发现运行效率较低&#xff0c;并且产生的代码较大&#xff0c;而通过优化可以较好地解决这些问题。 优化的作用是对循环进行化简&#xff0c;重新组织表达式和声…

大学生应当趁早谋划未来(二)--给表弟的建议

背景表弟&#xff0c;大四&#xff0c;湖北某二本院校&#xff0c;计算机相关专业。大学期间&#xff0c;对Java等编程没有兴趣&#xff0c;几乎没怎么学习。平时&#xff0c;课程比较多&#xff0c;每天6节左右。课外&#xff0c;自己去挣点生活费,父亲生病了。困境最近在找工…

UVa 490 - Rotating Sentences

把输入的字符顺时针旋转90度。 1 #include<stdio.h>2 #include<string.h>3 4 int main()5 {6 int i, j, max, n, m;7 char s[105][105];8 max0;9 memset(s, \0, sizeof(s)); 10 for (i0; gets(s[i]); i) 11 { 12 nstrlen(s[i]); 1…

node 大写_大写Node.js模块

node 大写Today, lets see a third party module that helps us in working with upper-case letters without necessarily typing them in upper-case in our source code. 今天&#xff0c;让我们看一个第三方模块&#xff0c;它可以帮助我们处理大写字母&#xff0c;而不必在…