Easyui layout设置满屏效果-低调大师

Easyui layout设置满屏效果

2017-12-31 655 89

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

微信关注我们

原文链接：https://yq.aliyun.com/articles/486724

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

objective-c优雅的语法

对初学者来说，objective-c存在了很多令人费解的写法，实际上他们是非常优雅的。程序员写的最多的就是函数以及调用自己写的或者别人写的函数。本文就从函数的角度来看下objective-c的优雅之处。 C#和objective-c同属于c系列语言。让我们先看下C#的函数定义和调用，做个对比。 C#函数的定义: public void doIt( string actorName, string movieName, int timesSeen) { Console.Write( " {0} is my favorite actor in the movie {1}, I saw it {2} times. " , actorName, movieName, timesSeen); } 函数的调用： Class1 objMovie = new Class1(); objMovie.doIt( " 莱昂纳多·迪卡普里奥 " , " 盗梦空间 " , 120 ); 在让.net程序员看下objective-c的定义： - ( void ) doIt:(NSString * ) ac...

503

ASP.NET MVC 3 Beta初体验之WebGrid

ASP.NET MVC 3 Beta中除了推出一种新的视图引擎Razor。还推出了几种新的HtmlHelper。我比较关注的是WebGrid，这篇文章将介绍一下WebGrid的使用。WebGrid提供了分页和排序的功能，在此之前在MVC中分页和排序时需要自己去写的。这篇文章将分别介绍在aspx视图引擎和Razor视图引擎中如何使用它。我通过ADO.NET Entity Data Model从NORTHWND的Products中表中取数据。在Controller中取数据： public class HomeController : Controller { public ActionResult Index() { NORTHWNDEntities entity = new NORTHWNDEntities(); return View( entity.Products.ToList()); } } 在aspx视图引擎中使用WebGrid代码如下： < div id ="grid" > <% var grid = new WebGrid(source: Model,...

448

资源下载

更多资源

优质分享Android(本站安卓app)

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario，低调大师唯一一个Java游戏作品

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Eclipse（集成开发环境）

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

Sublime Text 一个代码编辑器

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。