html文件:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Easyui Layout全屏</title> <link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css"> <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> <script id="others_jquery_easyui_131" type="text/javascript" class="library" src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script> </head> <body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:'west',split:true,title:'West'" style="150px;padding:10px;">west content</div> <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="100px;padding:10px;">east region</div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:'center',title:'Center'" id="center"> <button onclick="full()">全屏</button><button onclick="unFull()">取消全屏</button> </div> </body> </html>
js文件：
$.extend($.fn.layout.methods, { full : function (jq) { return jq.each(function () { var layout = $(this); var center = layout.layout('panel', 'center'); center.panel('maximize'); center.parent().css('z-index', 10); $(window).on('resize.full', function () { layout.layout('unFull').layout('resize'); }); }); }, unFull : 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 full() { $("body").layout("full"); } function unFull() { $("body").layout("unFull"); }
普通
满屏
