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="width:150px;padding:10px;">west content</div>

    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width: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");

}

普通

满屏

转载于：http://runjs.cn/code/2fjkfkuo

Easyui layout设置满屏效果的更多相关文章

  1. [微信小程序]在应用地图时，如何设置满屏(高度)

    微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度

  2. Easyui Layout Center 全屏方法扩展

    $.extend($.fn.layout.methods, { full : function (jq) { return jq.each(function () { var layout = $(t ...

  3. 009 Android Fragment动态用法（实现动态菜单栏）设置控件为满屏状态

    ·1.MainActivity采用线性布局 2.在app--->res--->layout,右击new--->xml---->layout xml FILE <1> ...

  4. Android简易实战教程--第四十九话《满屏拖动的控件》

    今天做个有意思的效果吧,控件的拖拽,简单实用,逻辑清晰点3分钟看完. 说的很高大上,其实就是拖动Button按钮跟着鼠标位置满手机屏幕跑罢了. 直接上简单的代码吧: public class Main ...

  5. Android 底部弹出Dialog（横向满屏）

    项目中经常需要底部弹出框,这里我整理一下其中我用的比较顺手的一个方式(底部弹出一个横向满屏的dialog). 效果图如下所示(只显示关键部分): 步骤如下所示: 1.定义一个dialog的布局(lay ...

  6. android 的闪屏效果

    android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...

  7. 消除PyCharm中满屏的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑. 在网上看了 ...

  8. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  9. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

随机推荐

  1. Spring AOP实现原理-动态代理

    目录 代理模式 静态代理 动态代理 代理模式 我们知道,Spring AOP的主要作用就是不通过修改源代码的方式.将非核心功能代码织入来实现对方法的增强.那么Spring AOP的底层如何实现对方法的 ...

  2. kafka一直rebalance故障，重复消费

    今天我司线上kafka消息代理出现错误日志,异常rebalance,而且平均间隔2到3分钟就会rebalance一次,分析日志发现比较严重.错误日志如下 08-09 11:01:11 131 pool ...

  3. windows + hadoop + eclipse 过程记录

    昨天在本机上搭建了伪分布式的hadoop,今天决定在eclipse中搭建hadoop的环境,毕竟磨刀不误砍柴工 安装的hadoop是2.7.5版本,要想使用eclipse写MapReduce需要一个  ...

  4. P2719 搞笑世界杯

    P2719 搞笑世界杯我觉得这个难度是假的,如果不知道这个是dp我就做不出来,好吧,知道我也没做出来..f[i][j]表示剩i张A票,j张B票时,最后两张票相同的概率.当前的队首有一半的概率选A,一半 ...

  5. html5 利用谷歌地图显示当前位置

    目前,google在国内需要FQ才能上,翻不了墙的话,只能获取到经纬度信息. *调用navigator.geolocation对象时,首先要获取用户同意. navigator.geolocation. ...

  6. 内存缓存 ehcache

    内存缓存需要对内存缓存每个参数的配置意义搞明白,才能很好地去使用,例如失效时间.存活时间. 是否存储在磁盘.是否永久有效,参数要了解清楚后进行使用,不要在不清楚时盲目使用,会导致意想不到 的问题发生. ...

  7. SHOI2019旅游记

    题外话 为什么不更ZJOI day1的游记呢.... 因为考挂自闭了不想更.等day2考完再说咕咕咕 还是更个SHOI旅游记吧!反正不是自家省选,玩得真开心~~~ day0 SH好热好热啊,感觉到夏天 ...

  8. [JZOJ4786]小a的强迫症

    [JZOJ4786]小a的强迫症 题目大意: 有\(n(n\le10^5)\)种颜色的珠子,第\(i\)种颜色有\(num[i]\)个.你要把这些珠子排成一排,使得第\(i\)种颜色的最后一个珠子一定 ...

  9. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

  10. jquery开发表格插件项目之知识点累积

    js设置节点的属性与属性值用setAttribute(),获取节点的属性和属性值用getAttribute(). jquery 中使用attr 就可以获取及设置元素属性. 在设置checkbox状态时 ...