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

    [ZJOI2016]线段树 ZJOI的题神啊. 我们考虑计算每个位置\(p\),它在操作过后变成第\(x\)个数的操作序列数. 我们枚举\(x\).我们先得到了\(L_x,R_x\)表示最左边比\(x ...

  2. 设计模式のStatePattern（状态模式）----行为模式

    一.产生背景 在面向对象软件设计时,常常碰到某一个对象由于状态的不同而有不同的行为.如果用if else或是switch case等方法处理,对象操作及对象的状态就耦合在一起,碰到复杂的情况就会造成代 ...

  3. 关于发邮件报错535 Error：authentication failed解决方法

    写在最前面 相信看到535报错的同学代码编写方面都没有问题,只是不明白为什么填写了帐号密码后还是报535错误,这里我以163邮箱为例,并使用Python讲解怎么解决535问题 代码如下: import ...

  4. Android自动登录功能的实现

    登陆页面布局设计: <LinearLayout android:layout_width="wrap_content" android:layout_height=" ...

  5. mount --bind使用方法

    我们可以通过mount --bind命令来将两个目录连接起来,mount --bind命令是将前一个目录挂载到后一个目录上,所有对后一个目录的访问其实都是对前一个目录的访问,如下所示: ## test ...

  6. python3 练习题 day03

    ''' 1. 文件a1.txt内容 序号 部门 人数 平均年龄 备注 1 python 30 26 单身狗 2 Linux 26 30 没对象 3 运营部 20 24 女生多 ....... 通过代码 ...

  7. vue是一个渐进式的框架，如何理解“渐进式”

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.使用vue,你可以在原有大系统的上面,把一两个组件改用它实现 ...

  8. Linux内存管理之mmap详解

    转发之:http://blog.chinaunix.net/uid-26669729-id-3077015.html Linux内存管理之mmap详解 一. mmap系统调用 1. mmap系统调用  ...

  9. devops工具-Ansible基础

    一.Ansible介绍 简介     Ansible使用Python语言开发,是一个配置管理型工具,与之类似的工具还有Puppet.SaltStack.chef等,默认通过SSH协议进行远程命令执行或 ...

  10. 极其好用好学的规则引擎 - A2D规则引擎

    写了个简单的规则引擎,普通情况够用了: 比如2家公司有各自的利率计算规则,如下: 在C#方面,没有写在C#的业务逻辑代码中,而是移到了外部规则文件中,如(ACompanyRatePolicy.r): ...