这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局。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基本配置与参数说明

    user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes  1;   #全局错误日志及PID文件 #error_log  logs/error.log; # ...

  2. DRF 中使用 级验科技滑动验证

    接口的login 登录 使用 Django 中的 auth 认证 因为之前合并了 django 的 用户表 创建的 用户 密码 会在内部进行加密 不知道加密方式所以要使用 authenticate 来 ...

  3. springboot常见写法

    访问html文件 对于aa.html页面,采用跳转到方式:放在templates目录下时,要加一个thymeleaf依赖,并在controller跳转. 不用跳转到方式: 将依赖去掉,将control ...

  4. Druid、BoneCP、DBCP、C3P0等主流数据库对比

    关键功能 Druid BoneCP DBCP C3P0 Proxool JBoss LRU 是 否 是 否 是 是 PSCache 是 是 是 是 否 是 PSCache-Oracle-Optimiz ...

  5. UVA11400-Lighting System Design（动态规划基础）

    Problem UVA11400-Lighting System Design Accept: 654  Submit: 4654Time Limit: 3000 mSec Problem Descr ...

  6. 转://工作中 Oracle 常用数据字典集锦

    DBA工作中数据字典就等同于我们本和笔,时时刻刻也分不开的,不管是看状态,还是监控,都需要数据字典的支持,本文整理出来常用的数据字典系列,帮助大家来记住和汇总以便查询利用 ALL_CATALOG Al ...

  7. 1043. 输出PATest(20)

    1043. 输出PATest(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一个长度不超过10000 ...

  8. memcache讲解和在.net中初使用

    memcache讲解和在.net中初使用 2017年10月17日 22:51:36 等待临界 阅读数:503   前言 传统数据库面临的问题 数据库死锁 磁盘IO 正文 了解memcache 原理 基 ...

  9. 阅读ARM Memory(L1/L2/MMU)笔记

    <ARM Architecture Reference Manual ARMv8-A>里面有Memory层级框架图,从中可以看出L1.L2.DRAM.Disk.MMU之间的关系,以及他们在 ...

  10. BZOJ1061 NOI2008 志愿者招募 线性规划、费用流

    传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...