easyui 不适用fit属性让布局在一定宽度自适应,小于此宽度产生滚动条
2014-08-07 21:19
573 查看
大家都知道,easyui 布局有个属性fit,只要添加了fit='ture',布局就会自适应,不管我们界面缩小到什么程度都会自适应,但往往就是自适应会带来一些弊端,比如说工具条当你缩小到一定的范围,工具条就会变乱。有时候我们想让布局自适应,但是在小于某个宽度和高度之后不想让其再自适应,不再缩小,给其出现上下滚动条。
然而,easyui 布局而言,如果不添加fit=true属性,那就要给布局一个固定大小,否则初始化的时候根本就显示不出来。
下边就让我们来看看怎样来实现呢?
上边布局很简单,一个north,一个center,给north一个固定高度来作为工具条,但是这样写布局初始化后,center不会显示出来,因为没加easyui-layout 布局上边添加fit=true;属性,它不会知道要显示多高。
下边我们给它添加一个css样式它就会显示出来
我们给它添加一个最小宽度和最小高度。这样他就会显示出来,如果页面被缩小到这个最小高度或者宽度之后就会出现对应的滚动条。
然而,这样不添加fit=true属性,当页面宽度在大于最小高宽小于浏览器最大高宽的时候,页面不会自适应,然而我们如果添加fit=true属性,最小高宽就不会起作用。
下边我们就来给jquery每一个对象扩展一个方法,让其布局在小于浏览器宽度与高度大于我们自定义的最小宽度和高度让其自适应。
代码如下:
然后我们就可以在页面添加一个布局侦听事件,每次页面一变化我们就重新布局。
但是也别忘记了初始化的时候让布局自适应,初始化的时候调用是为了让其界面初始化后高和宽能自适应屏幕分辨率,而不是按照最小高宽来显示。
然而,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(); })
相关文章推荐
- 如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
- easyui datagrid在fitColumns="true"的情况自适应宽度下失效
- 如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- easyui 自适应 fit属性
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- easyui 自适应 fit属性
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- css实现左右布局,左侧div固定不变,右侧div宽度自适应
- css判断不同分辨率显示不同宽度布局实现自适应宽度
- Jqurey实现类似EasyUI的页面布局可改变左右的宽度
- [WebApp]定宽网页设计下,固定宽度布局开发WebApp并实现多终端下WebApp布局自适应
- easyui panel自适应浏览器宽度
- CSS+DIV布局,一个列宽影响另一个列宽,使总宽度自适应(CSS+DIV Layout, one column's width depend on the other's)
- 两列布局宽度自适应
- easyui datagrid自适应浏览器宽度
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- Android日常布局适用范围介绍和关键属性说明
- 三栏布局方案:左右宽度固定,自适应布局
- html中散列布局的实现,中间自适应大小,两边固定宽度