这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局。layout可以基于body或者 div 进行布局。 
效果：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>easyui-layout的使用</title>

         <!-- 导入jquery核心类库 -->

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

         <!-- 导入easyui类库 -->

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

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

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

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

     </head>

     <body class="easyui-layout">

         <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>

         <div data-options="region:'west',title:'西部区域'" style="width:100px"></div>

         <div data-options="region:'center',title:'中部区域'"></div>

         <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>

         <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>

     </body>

 </html>

jQuery EasyUI布局容器layout实例精讲的更多相关文章

  1. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  2. jQuery EasyUI window窗口使用实例

    需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示.  <!DOCTYPE html> <html> ...

  3. plsql实例精讲部分笔记

    转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,mo ...

  4. 布局容器layout Container

    画布canvas 盒子Box VBox Hbox-->HGroup VGroup 控制条 ControlBar

  5. (转)jquery easyui treegrid使用小结 （主要讲的是如何编辑easyui中的行信息包括添加 下拉列表等）

    在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列 ...

  6. MySQL创建用户与授权方法实例精讲

    MySQL中创建用户与授权的实现方法. 运行环境:widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host ...

  7. Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

    说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...

  8. EasyUI学习总结(六)——EasyUI布局

    一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

  9. EasyUI学习总结(六)——EasyUI布局（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4088198.html 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必 ...

随机推荐

  1. 现在使用Nginx实现TCP反向代理

    Nginx 在1.9.0版本发布以前如果要想做到基于TCP的代理及负载均衡需要通过打名为 nginx_tcp_proxy_module 的第三方patch来实现,该模块的代码托管在github上网址: ...

  2. WPFの无边框窗体以及控件的移动

    对于WPF,一旦隐藏了标题栏,就无法移动,这时候需要重写移动方法,下面列举常见的三种方式方式. 方式一:重写OnMouseLeftButtonDown protected override void ...

  3. access数据库查找以及如果结果中存在多个匹配用户该怎么处理？

    查找用户的界面为: 首先对查找条件进行赋值: if (radioButton1.Checked) serMatchInfo = "用户姓名"; if (radioButton2.C ...

  4. SecureCRT 使用 rz命令提示waiting to receive.**B0100000023be50

    SecureCRT 远程连接Linux服务器,使用 rz命令提示waiting to receive.**B0100000023be50,或者使用sz命令提示: **B0100000023be50 解 ...

  5. js中arguments详解

    在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的[i ...

  6. SpringBoot系列之三_一个完整的MVC案例

    这一节让我们来做一个完整的案例. 我们将使用MyBatis作为ORM框架,并以非常简单的方式来使用MyBatis,完成一个完整的MVC案例. 此案例承接上一节,请先搭建好上一节案例. 一.数据库准备 ...

  7. POJ2749 Building roads

    嘟嘟嘟 最近把21天漏的给不上. 今天重温了一下2-SAT,感觉很简单.就是把所有条件都转化成如果--必然能导出--.然后就这样连边建图,这样一个强连通分量中的所有点必然都是真或者假.从而根据这个点拆 ...

  8. 转://Oracle PL/SQL 优化与调整 -- Bulk 说明

    一. Bulk 概述 本来只想测试一下Bulk Collect 和update性能的,但发现Bulk 的东西还是很多的,在OTN上搜了一些,整理如下. 1.1 Bulk Binding 和 Bulk ...

  9. pyspider环境部署2--pyspider安装

    接上篇文章,在python3.6.4安装完成的基础上,安装相关依赖模块及pyspider. 依赖安装 1.setuptools和pip setuptools和pip是python的包管理工具,pyth ...

  10. Python脱产8期 Day09 2019/4/23

    内存管理 一.引用计数:垃圾回收机制的依据 1.变量的值被引用,该值的引用计数 +12.变量的值被解绑,该值的引用计数 -13.引用计数为0时就会被垃圾回收机制回收 二.引用计数会出现循环引用问题:相 ...