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/
