easyUI layout

layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的,

周边区域panel是可选项,所有周边区域的panel可以改变大小通过拖动边框,他们也可以折叠(collapse)通过点击触发折叠事件,布局可以嵌套,因此用户

可以创建你想要的复杂布局;

使用示例

创建 Layout

1.通过标记创建layout.

记得添加"easyui-layout"样式给div标记.

  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
  2. <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
  3. <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
  4. <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
  5. <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
  6. <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
  7. </div>

2.创建一个layout在整个页面.

  1. <body class="easyui-layout">
  2. <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
  3. <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
  4. <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
  5. <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
  6. <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
  7. </body>

3.创建嵌套layout

注意那个west panel的内部的布局是折叠的.

  1. <body class="easyui-layout">
  2. <div data-options="region:‘north‘" style="height:100px"></div>
  3. <div data-options="region:‘center‘">
  4. <div class="easyui-layout" data-options="fit:true">
  5. <div data-options="region:‘west‘,collapsed:true" style="width:180px"></div>
  6. <div data-options="region:‘center‘"></div>
  7. </div>
  8. </div>
  9. </body>

4.通过ajax加载内容.

这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.

  1. <body class="easyui-layout">
  2. <div data-options="region:‘west‘,href:‘west_content.php‘" style="width:180px" ></div>
  3. <div data-options="region:‘center‘,href:‘center_content.php‘" ></div>
  4. </body>
折叠 Layout Panel
  1. $(‘#cc‘).layout();
  2. // 折叠west panel
  3. $(‘#cc‘).layout(‘collapse‘,‘west‘);
添加west 区域panel 工具按钮
  1. $(‘#cc‘).layout(‘add‘,{
  2. region: ‘west‘,
  3. width: 180,
  4. title: ‘West Title‘,
  5. split: true,
  6. tools: [{
  7. iconCls:‘icon-add‘,
  8. handler:function(){alert(‘add‘)}
  9. },{
  10. iconCls:‘icon-remove‘,
  11. handler:function(){alert(‘remove‘)}
  12. }]
  13. });

Layout 选项

Name Type Description Default
fit boolean 设置为true设置layout的大小适应父容器大小.当创建layout 在body标签上的时候,它将自动调整大小为最大填满整个页面. false

Region Panel 选项

region panel 选项 是定义在panel组件, 下面是一些常用和新增的属性:

Name Type Description Default
title string  layout panel标题文本. null
region string 定义 layout panel 位置, 这个值是下面其中的一个: north, south, east, west, center.  
border boolean True 显示 layout panel 的边框(border). true
split boolean True 显示分割条,通过此属性用户可以改变panel的大小. false
iconCls string 一个 icon CSS 样式,用来展示一个icon在panel的头部. null
href string 一个URL从一个远程的站点加载数据. null

方法

Name Parameter Description
resize none 设置 layout 大小.
panel region 返回特性的 panel, 这个 ‘region‘参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘,‘center‘.
collapse region 折叠特定的panel,这个 ‘region‘参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.
expand region 展开一个特定的 panel, 这个 ‘region‘ 参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.
add options 添加一个定义panel, 这个options参数是一个配置对象, 请见tab panel 属性得到更多详细信息.
remove region 移除一个特定的 panel, 这个‘region‘ 参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.
时间: 2025-01-02 17:22:28

easyUI layout的相关文章

Easyui layout设置满屏效果

html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Easyui Layout全屏</title> <link id="others_jquery_easyui_131" rel="sty

网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?

1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height:250">     <div data-options="region:'north',title:'north',height:50"></div>     <div data-options="region:'west',tit

EasyUI+LayOut+Partial=完美界面

一次偶然的机会让我接触到了UI系统,自然而然也开始学习和使用EasyUI和其他的一些关于界面的知识,趁今天这时间停下脚步好好整理整理最近用到的一些知识:easyUI .Layout.Partial  一.layout LayOut,所谓的布局页,也可以理解为母版页,母版页的性质和父类很相似,都具备了"子类"的共性,所以母版页可以理解为某些样式的一个父辈集合体.而它也就是将所有界面用到的公共样式整合到一起:比如将所有界面都用到的EasyUI引用进行整合: <span style=&

前端框架easyui layout, Tabs,tree

一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部分免费,支持响应式 3.alyui 好看,开发速度快,免费,支持响应式c 二.jQuery EasyUI (layout, Tabs,tree) 下载程序库并导入EasyUI和javascript文件 <link rel="stylesheet" type="text/cs

EasyUI - Layout 布局控件

效果: Html代码: <div id="cc" class="easyui-layout" style="width: 600px; height: 400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;"></div> <di

easyUI layout 中使用tabs+iframe解决请求两次方法

demo中的事例在加载tab页面时是 1 function createFrame(url) { 2 var s = '<iframe name="iframepanel" scrolling="no" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; 3 return s; 4

easyui layout 布局title

<script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($("#mainFrm").prev()[0]).html(name); //$("#mainFrm") }); } </script> <!--主窗体--> <div id="mainFrm" data-options=&

Easyui 生成layout

var $tabs; var $body; var $south; function appendLayout(title, href) { if (!$body) $body = $(document.body); if (!$body.hasClass('layout')) { var $centerHtml = $("<div>", { "id": "center", "style": "heigh

使用EasyUI创建分页对比效果

近期实验室在做一个教学质量分析的系统,主要功能就是统计汇总考试信息从而得出知识点掌握的熟练程度.最近老板检查项目进度的时候向师兄提出了一个需求,想要通过点击筛选把页面一分为二,从而老师可以自己的筛选结果与总体要求有一个对比.初来乍到的我菜的一笔,实现不了后台复杂的逻辑,于是师兄就把这个实现分页效果的任务交给了我. 第一步,找到可以实现这个效果的一种布局 首先,在师兄的帮助下找到了EasyUI这个强大的jQuery界面插件,在这其中有一个EasyUI Layout布局比较适合这个需求.布局(lay