<div class="easyui-layout" fit="true" id="layoutId">
<div data-options="region:'west'">
</div>
<div data-options="region:'center'">
</div>
<a title="layout全屏" οnclick="fullOrUnfull();"><img class="line-light lineLight-right" src="1.png" style="width: 30px; height: 30px;"></a>
<a title="layout全屏浏览器" οnclick="fullBrowser();"><img class="line-light lineLight-right" src="1.png" style="width: 30px; height: 30px;"></a>
</div>
<script type="text/javascript">
//***************layout全屏********************
$.extend($.fn.layout.methods, {
fullScreen: function (jq) {
return jq.each(function () {
var layout = $(this);
var center = layout.layout('panel', 'center');
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', 'center');
center.parent().css('z-index', 'inherit');
center.panel('restore');
$(window).off('resize.full');
});
}
});
function fullOrUnfull() {//全屏
$('#layoutId').layout("fullScreen");
}
function unfull() {//取消全屏
$('#layoutId').layout("unFullScreen");
}
//***************layout全屏浏览器***********************
document.addEventListener("webkitfullscreenchange", function(e) {
//监听(获取高度screen.height)
});
function fullBrowser() {
if(isFull()){
document.exitFullscreen();//取消全屏
}else{
document.documentElement.webkitRequestFullScreen();//全屏
}
}
//判断是否全屏
function isFull() {
var fullscreenElement = document.webkitFullscreenElement;
if (fullscreenElement == null) {
return false;
} else {
return true;
}
}
</script>
easyui layout 设置全屏
最新推荐文章于 2023-05-08 08:54:28 发布