easyui 不适用fit属性让布局在一定宽度自适应，小于此宽度产生滚动条

最新推荐文章于 2021-07-29 09:20:15 发布

原创最新推荐文章于 2021-07-29 09:20:15 发布 · 7.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery实现easyui布局自适应

easyui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种改进EasyUI布局的方法，在保持自适应的同时，设置了最小宽度和高度以避免布局混乱。通过扩展jQuery方法实现了特定尺寸下的自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道，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();
                })