关于easyui的layout的region的resize的问题(自适应浏览器)
1. resize问题:
$('#subWrap').layout('panel', 'east').panel('resize',{width:300}); $('#subWrap').layout('resize');
通过上面两句代码来实现layout的east的宽度重置。
2. 自适应浏览器:
转自:http://www.helloweba.com/view-blog-198.html
我们使用jQuery先向body中动态插入一个DIV,并且该DIV中包含一张图片,也就是我们要求拉伸效果的背景图片。然后使用jQuery获取浏览器窗口的大小,根据浏览器窗口大小,动态设置背景图片的尺寸(宽和高)。
代码:
$(function(){ $("body").append("<div id='main_bg'/>"); $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); cover(); $(window).resize(function(){ //浏览器窗口变化 cover(); }); }); function cover(){ var win_width = $(window).width(); var win_height = $(window).height(); $("#bigpic").attr({width:win_width,height:win_height}); }
上述代码中,cover()函数就是动态的设置了背景图片的尺寸,通过jQuery的append方法动态加入背景图片,当页面加载完成时已经浏览器窗口 变化时都能实现背景图片的拉伸效果,也就是页面ready和resize都调用了cover()函数。jQuery解决方案完全解决了浏览器兼容的问题, 请看DEMO2
总结:同样的道理,我们可以设置浏览器窗口监听,通过标题1的resize方法来实现对layout宽度的控制:
实践:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Complex Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script> <script> $(function(){ cover(); $(window).resize(function(){ //浏览器窗口变化 cover(); }); }); function cover(){ var win_width = $(window).width(); $('#subWrap').layout('panel', 'east').panel('resize',{width:win_width/3}); $('#subWrap').layout('resize'); } </script></head><body> <div id="subWrap" class="easyui-layout" fit="true"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'east',split:true" title="East" ></div> <div data-options="region:'west',split:true" title="West" style="width:180px;" ></div> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',fit:true"></div> </div></body></html>
关于easyui的layout的region的resize的问题(自适应浏览器)相关推荐
- EasyUI中layout布局的简单使用
场景 效果 布局选项(Layout Options) 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
- EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
- easyui datagrid如何自适应浏览器的宽度和高度
field如果有重复的话,会导致fitColumns="true"失效 如果列都没有设置宽度的话,也会导致fitColumns="true"失效 我的是fie ...
- Layout 不可思议(一)—— CSS 实现自适应的正方形卡片
最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去 需求是实现一个自适应的正方形卡片,效果如下: 顺便(开个坑)写个系列,总结那些设计精妙的布局结构 本次页面的 ...
- react根据浏览器的尺寸动态调整布局
react根据浏览器的尺寸动态调整div react实现关键代码 // 设置状态 state = {deskDivWidth:800px;deskHeight: document.body.clien ...
- 网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?
1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height ...
- php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
- easyUI Layout
@author YHC 覆盖默认属性$.fn.layout.defaults layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),cent ...
- jquery+easyui开发、培训文档
目 录 1.... Accordion(可折叠标签)......................................................................... ...
最新文章
- mysql5.0 Using a password on the command line interface can be insecure.最简单的解决办法
- html学习文档-3、HTML元素
- jax-rs jax-ws_在JAX-RS中使用@Context [第1部分]
- 数据库面试 - 如何设计可以动态扩容缩容的分库分表方案?
- Java多线程 5 多线程其他知识简要介绍
- vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
- BIG5, GB(GB2312, GBK, ...), Unicode编码, UTF8, WideChar, MultiByte, Char说明与区别
- IV值区间与预测能力关系
- Python面向对象加强4.iter与next的用法,枚举器enumerate
- MATLAB小技巧(30)非线性拟合 lsqcurefit
- MySQL 8.0安装教程
- android 字体颜色 渐变色,Android渐变色处理
- 我的Java乱卷之路
- 校园网自动登陆(河南科技学院)
- 33题实战“泰坦尼克号生存预测”全流程
- matlab 仿真元件封装,利用M文件与封装模块简化Simulink仿真模型.pdf
- Self-training with Noisy Student improves ImageNet classification阅读笔记
- 我们征服托业,还是被托业征服?
- 燕十八公益教程-学习感想
- python实现动态柱状图
热门文章
- 图解Flex开发教程
- Linux并发与同步专题 (1)原子操作和内存屏障
- java子类对象不能调用父类protected方法和域的原因。
- JavaScript案例三:动态显示时间
- 傲娇Android二三事之操蛋的开发日记(第一回)
- [Mac技巧]Mac下显示隐藏文件
- 三菱PWM格式文件梯形图编码格式
- linux下的网络管理命令,常用linux网络管理命令(下)
- 在分类的意义上最稳定的物体是什么?
- 【Paper】2019_Distributed Cooperative Control of a High-speed Train