easyui 不适用fit属性让布局在一定宽度自适应,小于此宽度产生滚动条
来源:互联网 发布:绵阳鼎盛医疗软件 编辑:程序博客网 时间:2024/04/30 07:10
大家都知道,easyui 布局有个属性fit,只要添加了fit='ture',布局就会自适应,不管我们界面缩小到什么程度都会自适应,但往往就是自适应会带来一些弊端,比如说工具条当你缩小到一定的范围,工具条就会变乱。有时候我们想让布局自适应,但是在小于某个宽度和高度之后不想让其再自适应,不再缩小,给其出现上下滚动条。
然而,easyui 布局而言,如果不添加fit=true属性,那就要给布局一个固定大小,否则初始化的时候根本就显示不出来。
下边就让我们来看看怎样来实现呢?
<div id="main-layout" class="easyui-layout" data-options="border:false"> <div data-options="region:'north',height:33"> </div> <div data-options="region:'center',border:false"> </div> </div>
上边布局很简单,一个north,一个center,给north一个固定高度来作为工具条,但是这样写布局初始化后,center不会显示出来,因为没加easyui-layout 布局上边添加fit=true;属性,它不会知道要显示多高。
下边我们给它添加一个css样式它就会显示出来
#main-layout{ min-width:1050px; min-height:240px; overflow:hidden;}
我们给它添加一个最小宽度和最小高度。这样他就会显示出来,如果页面被缩小到这个最小高度或者宽度之后就会出现对应的滚动条。
然而,这样不添加fit=true属性,当页面宽度在大于最小高宽小于浏览器最大高宽的时候,页面不会自适应,然而我们如果添加fit=true属性,最小高宽就不会起作用。
下边我们就来给jquery每一个对象扩展一个方法,让其布局在小于浏览器宽度与高度大于我们自定义的最小宽度和高度让其自适应。
代码如下:
(function($) { $.fn.resizeLayout = function(options, param) { if (typeof options == 'string') { return $.fn.ywcalendar.methods[options](this, param); } //初始化布局 var layoutWidth = $(window.parent).width() < 1050 ? 1050 : $(window.parent).width(); var layoutHeigth = ($(window.parent).height()) <240 ? 240 : $(window.parent).height(); $(this).width(layoutWidth); $(this).height(layoutHeigth); $(this).layout('panel', 'north').panel('resize', {width: layoutWidth}); $(this).layout('panel', 'center').panel('resize', {width: layoutWidth}); $(this).layout('panel', 'center').panel('resize', {height: layoutHeigth - 33}); $(this).layout('resize'); };})(jQuery);
然后我们就可以在页面添加一个布局侦听事件,每次页面一变化我们就重新布局。
window.onresize = function() { //重新布局 $('#main-layout').resizeLayout(); };
但是也别忘记了初始化的时候让布局自适应,初始化的时候调用是为了让其界面初始化后高和宽能自适应屏幕分辨率,而不是按照最小高宽来显示。
$(function() { //初始化布局 $layout=$('#main-layout'); $layout.resizeLayout(); })
0 0
- easyui 不适用fit属性让布局在一定宽度自适应,小于此宽度产生滚动条
- IE浏览器,div模拟滚动条,div宽度小于18 滚动条不滚动
- 给div设置宽度,规定不能超过某宽度,小于此宽度则自适应
- easyui 自适应 fit属性
- easyui 自适应 fit属性
- shrink-to-fit(自适应宽度)
- 浏览器不显示滚动条,IFREAM显示滚动条并自适应宽度。
- 自适应布局---自适应宽度
- 让页面出现滚动条的时候,滚动条不影响页面宽度
- easyUI自适应宽度问题
- easyUI宽度自适应
- EasyUI 表单宽度自适应
- easyui-datagrid自适应宽度
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- 二列右列宽度自适应布局
- DIV 自适应宽度 布局
- CSS布局-宽度自适应
- MessageDigest简介
- 关于一个简单的python上传到linux服务器再经过shell脚本ftp传输的问题
- 第一个java程序(9x9乘法表)
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- 哈希表简易入门
- easyui 不适用fit属性让布局在一定宽度自适应,小于此宽度产生滚动条
- 浅谈异常Exception
- 重构个人版机房收费(二)——泛型集合
- 今年暑假数学建模让我们一起加油↖(^ω^)↗
- myeclise10 svn: E210004: Number is larger than maximum 解决方案
- 2014-08-07 日志
- C++设计模式之原型模式(二)
- 【线段树】 HDOJ 4630 No Pain No Game
- java 面向对象的多态性