这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局。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. Ajax请求中的async:false/true的作用[转]

    test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...

  2. bs4 解析 以及用法

    bs4解析 bs4: 环境安装: lxml bs4 bs4编码流程: 1.实例化一个bs4对象,且将页面源码数据加载到该对象中 2.bs相关的方法或者属性实现标签定位 3.取文本或者取属性 bs的属性 ...

  3. SQL FULL JOIN 关键字

    SQL FULL JOIN 关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行. FULL JOIN 关键字语法 SELECT column_name(s) FROM table_n ...

  4. 伪静态规则RewriteRule-htaccess

    伪静态实际上是利用php把当前地址解析成另一种方法来访问网站,要学伪静态规则的写法,要懂一点正则 一.正则表达式教程 有一个经典的教程:正则表达式30分钟入门教程 常用正则如下: . 换行符以外的所有 ...

  5. CF817F MEX Queries

    嘟嘟嘟 这题一直在我的某谷任务计划里,不知为啥一直没做. 现在看起来很水啊,就是离散化+线段树.可能是当时没想明白怎么离散化吧. 就是先把算有区间端点都离线下来,然后把\(l - 1, l, l + ...

  6. pm2命令，端口查询，mongodb服务启动，nginx服务启动，n模块的使用，搭建nodejs服务器环境，搭建oracledb服务器环境 linux的环境搭建

    pm2命令 pm2 ls //查询pm2 启动的列表 pm2 start app.js //启动文件 pm2 restart app //重启项目 pm2 logs app //监控项目执行日志打印 ...

  7. 005_解决pip国外安装源慢的问题

    用默认的pip安装源pypi.python.org由于在国外经常会出现超时的问题,而且安装速度极其的慢,如下图中的超时问题=>

  8. 通过随机数获得学生成绩，并把每个元素赋值为学生的分数成绩，通过增强for循环遍历结果。

    package com.Summer_0419.cn; /** * @author Summer * 通过随机数获得学生成绩,并把每个元素赋值为学生的分数成绩 */ public class Test ...

  9. JavaScript的基本包装类型说明

    一.基本包装类型: 为了便于操作基本类型值,ECMAScript 还提供了3个特殊的引用类型:Boolean.Number和String.这些基本包装类型,具有与各自基本类型相应的特殊行为. 实际上我 ...

  10. Vue常规后台系统，路由懒加载实现基于菜单数据并解耦

    路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...