1.创建布局

创建布局只需要添加 'easyui-layout' class 到 <div> 标记或者

在整个页面创建布局，即<body class="easyui-layout"></body>

 <body class="easyui-layout">

     <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">logo</div>

     <div data-options="region:'west',split:true,title:'导航菜单'" style="width:200px;">

         <!--fit属性很重要当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器-->

         <div class="easyui-accordion" fit="true" style="width:200px;height:auto;">

             <div title="权限管理" selected="true" style="overflow:auto;height:auto;">

             </div>

             <div title="系统管理" style="padding:10px;">

             </div>

         </div>

     </div>

     <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>

     <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">footer</div>

     <div data-options="region:'center',title:'我的桌面'"></div>

 </body>

2.效果

3.常用属性

1.data-options 对easyui组件的属性设值

2.title 布局面板（layout panel）的标题文本

3.region 定义布局面板（layout panel）的位置，有：north、south、east、west、center

4.border 是否显示边框

5.iconCls 在面板（panel）头部显示一个图标的 CSS class

6.collapsible 是否显示可折叠按钮

还有其他就不写了参考

http://www.jeasyui.net/plugins/162.html

Easyui简单布局的更多相关文章

  1. 【开源】OSharp框架解说系列（2.2）：EasyUI复杂布局及数据操作

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. 【EasyUI】——EasyUI的布局

    做一个站点首先要有站点的布局,所谓的布局事实上就是网页的排版.就是说你的网页显示时是什么样子的. 就比方百度的首页: 无论是谁登录.网页都是这个样式的. EasyUI中的网页布局一共分为五部分,分别为 ...

  4. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  5. WPF简单布局 浅尝辄止

            WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...

  6. Easyui入门视频教程 第05集---Easyui复杂布局

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  7. table 和 div 简单布局

    table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  8. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  9. EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

随机推荐

  1. JAVA字符串05之课程问题解决

    (一)古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 1.设计思想:首先选择是加密字符串还是解密字符串,两种算法相似.如果要加密字符串 ...

  2. VPS/云主机 如何试用远程连接登录主机服务器_

    1.windows主机如何远程登录 点本地电脑开始>运行(或者按"window+R")>输入mstsc点确定 弹出远程连接的框输入IP连接,  如果是VPS,直接输入I ...

  3. intent参数的回传

    1. public class MainActivity extends Activity { private EditText editText1, editText2, editText3; pr ...

  4. 在代码设置RelativeLayout的属性，比如layout_below

    ( (RelativeLayout.LayoutParams)holder.ivLvDivider.getLayoutParams()).addRule(RelativeLayout.BELOW, R ...

  5. Amazon EC2免费VPS防止超额被扣钱三大方法:流量 硬盘读写 运行时长

    Amazon EC2也就是亚马逊云服务免费VPS主机服务,内存是613MB,月流量是30GB,主机空间是30GB,可以免费使用一年,又加上Amazon服务器全球多个节点CDN和本身的名气,早在2010 ...

  6. socket.io与redis构建实时推送

    准备工作 1:准备nodejs环境 2:使用npm工具安装 socket.io  npm install socket.io 3:下载客户端socket.io文件 解压附件中的文件 node app. ...

  7. Android studio 提示：Can't use Subversion command line client: svn Probably the path to Subversion executable is wrong. Fix it.

    1.参考来源:http://my.oschina.net/fyyy/blog/519353 按照下图,svn相关选项不要选.

  8. 【浅层优化实战】ssh远程登录Linux卡慢的全过程排查及解决方案

    ssh远程登录Linux卡慢的全过程排查及解决方案 前言: 在linux操作系统使用过程中偶然一次感到使用ssh远程连接软件连接操作系统需要等待许久,第一次没在意,第二次也没在意,第三次有点忍受不住了 ...

  9. 常用CSS样式

    1.line-height:行高.默认normal normal:允许内容顶开或溢出制定的容器边界; length:15px,可以为负数; ... 2.overflow:滚动条设置 overflow- ...

  10. 004-For与Function进阶实战、Lazy的使用

    004-For与Function进阶实战.Lazy的使用 For进阶 非常常见的形式 可以加入条件表达式进行数据过滤 Function进阶 函数是有值的(默认的话为Unit),所以可以直接将结果赋值给 ...