<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Layout（布局）</title>

    <meta http-equiv="keywords" content="学习,IT学习,好好学习">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- 引入css文件，不限顺序 -->

    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

      <!-- 引入js文件，有顺序限制 -->

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->

  </head>

  <body>

        <!-- 布局 -->

        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">

            <!-- 区域面板--北边 -->

            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   

            <!-- 区域面板--南边 -->

            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   

            <!-- 区域面板--东边 -->

            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   

            <!-- 区域面板--西边 -->

            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 区域面板--中间 -->

            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   

        </div>

        <script type="text/javascript">

            //easyui调用方法的语法如下：$('selector').组件名('method',parameter); 

            //浏览器加载jsp页面时触发

            $(function(){

                //将北边折叠

                $('#layoutID').layout('collapse','north');

                //休息3秒

                window.setTimeout(function(){

                    //将南边折叠

                    $("#layoutID").layout("collapse","south");

                    //将北边展开

                    $('#layoutID').layout('expand','north');

                    window.setTimeout(function(){

                        //将南边展开

                        $("#layoutID").layout("expand","south");

                    },3000);

                },3000);

            });

        </script>

  </body>

</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Layout（布局）</title>

    <meta http-equiv="keywords" content="学习,IT学习,好好学习">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- 引入css文件，不限顺序 -->

    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

      <!-- 引入js文件，有顺序限制 -->

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->

  </head>

  <body class="easyui-layout">

            <!-- 区域面板--北边 -->

            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   

            <!-- 区域面板--南边 -->

            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   

            <!-- 区域面板--东边 -->

            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   

            <!-- 区域面板--西边 -->

            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 区域面板--中间 -->

            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   

        <script type="text/javascript">

            //easyui调用方法的语法如下：$('selector').组件名('method',parameter); 

            //浏览器加载jsp页面时触发

            $(function(){

                //将北边折叠

                $('#layoutID').layout('collapse','north');

                //休息3秒

                window.setTimeout(function(){

                    //将南边折叠

                    $("#layoutID").layout("collapse","south");

                    //将北边展开

                    $('#layoutID').layout('expand','north');

                    window.setTimeout(function(){

                        //将南边展开

                        $("#layoutID").layout("expand","south");

                    },3000);

                },3000);

            });

        </script>

  </body>

</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Layout（布局）</title>

    <meta http-equiv="keywords" content="学习,IT学习,好好学习">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- 引入css文件，不限顺序 -->

    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

      <!-- 引入js文件，有顺序限制 -->

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->

  </head>

  <body>

    <div id="layoutID" class="easyui-layout" data-options="fit:true">

        <!-- 北 -->

        <div data-options="region:'north'" style="height:100px"></div>

        <!-- 中 -->

        <div data-options="region:'center'">

            <div class="easyui-layout" data-options="fit:true">

                <!-- 西 -->

                <div data-options="region:'west'" style="width:200px"></div>

                <!-- 中 -->

                <div data-options="region:'center'">

                    <div class="easyui-layout" data-options="fit:true">

                        <!-- 北 -->

                        <div data-options="region:'north'" style="height:100px"></div>

                        <!-- 中 -->

                        <div data-options="region:'center'"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>        

  </body>

</html>

easyUI之Layout（布局）的更多相关文章

  1. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  2. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  3. CI 笔记3 （easyui 的layout布局，最小化layout原型）

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  4. 经历：easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

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

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

  6. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  7. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

  8. easyui layout布局的属性说明

    layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...

  9. jQuery EasyUI API - Layout - Layout[原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  10. 新建android工程的时候eclipse没有生成MainActivity和layout布局

    一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...

随机推荐

  1. 小程序Flex布局

    容器属性 容器支持的属性有:display:通过设置display属性,指定元素是否为Flex布局.flex-direction:指定主轴方向,决定了项目的排列方式.flex-wrap:排列换行设置. ...

  2. Oracle笔记（十四） 用户管理

    SQL语句分为三类:DML.DDL.DCL,之前已经讲解完了DML和DDL,现在就差DCL操作的,DCL主要表示的是数据库的控制语句,控制的就是操作权限,而在DCL之中,主要有两个语法:GRANT.R ...

  3. TF版网络模型搭建常用代码备忘

    本文主要介绍如何搭建一个网络并训练 最近,我在写代码时经常碰到这样的情况,明明记得代码应该怎么写,在写出来的代码调试时,总是有些小错误.原因不是接口参数个数不对,就是位置不对.为了节约上网查找时间,现 ...

  4. 牛客练习赛51 C 勾股定理 （数学，结论）

    链接:https://ac.nowcoder.com/acm/contest/1083/C来源:牛客网 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角 ...

  5. Linux命令之tree(目录树结构)

    tree命令 官方下载地址:http://mama.indstate.edu/users/ice/tree/,右键复制如下图地址: 下载: 执行wget  http://mama.indstate.e ...

  6. Python 列表和元组 (2) 持续更新

    数据结构就是数据的集合.Python最基本的数据结构就是序列,每个元素都会被分配一个元素的位置,也可以称为索引.注意索引都是从0开始的. Python包含6种内建的序列,分别是列表.元组.字符串.Un ...

  7. fiddler save files

    使用fiddler 保存访问到的文件 使用jscript Fiddler Script 是用JScript.NET语言写的 JScript.NET 此语言可以调用C# api 参考地址:http:// ...

  8. c语言1-2019秋作业02

    格式: 这个作业属于那个课程 C语言程序设计I 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-3/homework/8688 我在这个课程的 ...

  9. Zookeeper:Zookeeper集群概要

    1.下载解压zookeeper 使用官网的(http://zookeeper.apache.org/releases.html#download)推荐下载镜像https://mirrors.tuna. ...

  10. 题解 [51nod1201] 整数划分

    题面 解析 首先,因为是不同的数字, 可以从小到大依次枚举加上每一个数字的贡献,再枚举每个数. 然而这样会T掉... 考虑到\(n\)只有\(50000\), 当分成的数最多时,设最大的数为\(m\) ...