easyui 中设置Layout的一个面板全屏显示

1.定义一个共通的方法

$.extend($.fn.layout.methods, {

    fullScreen: function (jq) {

        return jq.each(function () {

            var layout = $(this);

            var center = layout.layout('panel', 'south');

            center.panel('maximize');

            center.parent().css('z-index', 20);

            $(window).on('resize.full', function () {

                layout.layout('unFullScreen').layout('resize');

            });

        });

    },

    unFullScreen: function (jq) {

        return jq.each(function () {

            var center = $(this).layout('panel', 'south');

            center.parent().css('z-index', 'inherit');

            center.panel('restore');

            $(window).off('resize.full');

        });

    }

});

2.在html页面中定义按钮

<div id="detail"

            style="height:50%"

            data-options="region:'south',

                          title:'明细',

                          collapsed:true,

                          split:true,

                          tools: [{

                                    iconCls:'icon-arrow_out',

                                    handler:fullOrUnfull

                                    }]">

        </div>

3.在js中调用共通方法

// 全屏的时候点击取消执行全屏，取消全屏的时候点击执行全屏

var flag=1

function fullOrUnfull(){

  flag == 1 ? $('#layoutId').layout("fullScreen") : $('#layoutId').layout("unFullScreen");

  flag = flag == 1 ? 0 : 1;

}

更多内容请访问：https://mxdqh.top/