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. Centos启动Cassandra交互模式失败：No appropriate python interpreter found

    在CentOS6.5安装好Cassandra后,启动交互模式: bin/sqlsh 192.168.10.154 时,报错 No appropriate python interpreter foun ...

  2. 版本控制简介，git使用----使用GitHub托管代码

    关于版本控制: 很久以前,人们苦于对写过的代码进行版本的管理,经常过了一段时间想恢复原来写过的代码却又忘了不知道丢到哪儿去了,有的人用加上时间后缀来命名文件的方法,便于后期维护,但是这样做的麻烦也很大 ...

  3. 关于display:inline-block和float：left的区别

    <div class="pag"> <a href="#">首页</a> <a href="#"& ...

  4. get github

    Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目前,包括Rubinius ...

  5. QT 做软件盘

    最近搞了一个组织细胞脱水机项目,当然,对于国内的项目都是仿来仿去的,我们也不例外,开启被仿机器后,第一个看到的界面就是用户登录界面,需要输入中文,作为一个程序员,我的第一反应就是我需要采用什么用的框架 ...

  6. solr全文检索原理及solr5.5.0 Windows部署

    文章原理链接:http://blog.csdn.net/xiaoyu411502/article/details/44803859 自己稍微总结:全文检索主要有两个过程:创建索引,搜索索引 创建索引: ...

  7. tomcat apache 实现负载平衡的小demo

    软件:1个apache,2个tomcat module包:mod_jk.so(下载地址:http://tomcat.apache.org/download-connectors.cgi) 下载文件解压 ...

  8. iOS安全—阻止tweak注入hook api

    http://blog.csdn.net/zcrong/article/details/51617348 在Other Linker Flags中添加: -Wl,-sectcreate,__RESTR ...

  9. C++小项目：directx11图形程序（五）：shadersclass

    这个类是用来创建着色器并设置输入布局的. 这个类比较特殊,它创建的着色器与Effect文件有关,effect文件是用高级着色语言(hlsl)编写的. shadersclass.h #pragma on ...

  10. react-native start 运行流程

    在CMD下键入 C:\Node_JS\MyAwesomeProject>react-native start 运行流程: C:\Users\Grart\AppData\Roaming\npm\r ...