<!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. opencv读取图像python和c++版本的结果不同

    问题: 在读取同一张图像时,python读取的结果和c++读取的结果差异较大,测试图像中最大误差达到16. 原因: python的opencv采用的是4.1.1,c++采用的是3.1.0,在解析JPE ...

  2. windows10 L2tP nat 下无法连接的处理

    事件查看器中没有错误代码显示. Windows 10 L2TP/IPsec Manual Setup Instructions Bold items are things you will click ...

  3. YOLO---Darknet下的学习笔记

    YOLO.V3-Darknet下的学习笔记 @wp20180927 [目录] 一. 安装Darknet(仅CPU下) 2 1.1在CPU下安装Darknet方式 2 1.2在GPU下安装Darknet ...

  4. IDEA设置CodeGlance颜色

    CodeGlance是IDEA的mini地图插件, 默认情况下, 其颜色和编辑框的颜色基本一致, 而安装CodeGlance就是为了方便滚动框的上下拖拉, 颜色一致的话会将这种CodeGlance比拖 ...

  5. 小白学习MongoDB笔记(一)·下载及安装MongoDB

    下载地址:http://dl.mongodb.org/downloads.我选的64位的 windows64-bit 2008 R2.当时版本为3.0.7 文件格式为.msi 借用“一线码农”的话: ...

  6. Access viewchild from another component

    https://stackoverflow.com/questions/50935728/access-viewchild-from-another-component =============== ...

  7. ubuntu 16.04中文输入法安装

    转自: http://blog.csdn.net/u011795345/article/details/53041707 最近刚给笔记本装了Ubuntu+win10双系统,但是ubuntu16.04没 ...

  8. BZOJ 1022 / P4279 Luogu [SHOI2008]小约翰的游戏 (反Nim游戏) (Anti-SG)

    题意 反Nim游戏,两人轮流选一堆石子拿,拿到最后一个的输.问先手是否必胜. 分析 怎么说,分类讨论? 情形1:首先考虑最简单的情况,所有石子数都为1.那么奇数堆石子为必败,偶数为必胜 情形2:然后考 ...

  9. 编译vim8

    1.获取最新的vim源码 $ wget https://codeload.github.com/vim/vim/tar.gz/v8.1.2256 2.解压缩 $ tar -xvzf vim-8.1.2 ...

  10. OFDM时域削峰法降峰均比的原理及影响

    以下是对实验室师兄答疑的转述,经加工后的文字不可避免的存在一些噪声,仅供参考: 时域削峰为非线性变换,效果上相当于将时域中功率较大值的信号点,减去一个合适的“抵消”信号点的功率,使其降低到所设置的门限 ...