http://www.jeasyui.com/documentation/layout.php

简介:

Layout

Override defaults with $.fn.layout.defaults.

The layout is the Container that has up to five regions: north, south, east, west and center. The center region panel is required but edge region panel is optional. Every edge region panel can be resized by dragging its border, they also can be collapsed by clicking on its collapsing trigger. The layout can be nested, thus users can build what complex layout he wants.

Dependencies

  • panel
  • resizable

Usage Example

Create Layout

1. Create Layout via markup.

Add 'easyui-layout' class to <div/> markup.

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

2. Create layout on whole page.

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

3. Create nested layout.

Notice that the west panel of inner layout is collapsed.

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

4. Loading content with ajax

The layout is created based on panel. Each region panel provides built-in support for asynchronously loading content from URLs. Using the async loading technology, users can make their layout page display more faster.

  1. <bodyclass="easyui-layout">
  2. <divdata-options="region:'west',href:'west_content.php'"style="width:180px"/>
  3. <divdata-options="region:'center',href:'center_content.php'"/>
  4. </body>

Collpase Layout Panel
  1. $('#cc').layout();
  2. // collapse the west panel
  3. $('#cc').layout('collapse','west');

Add west region panel with tool buttons
  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 Options

Name Type Description Default
fit boolean Set to true to set the layout size fit its parent container. When creating layout on 'body' tag, it will be auto maximized to the full size of whole page. false

Region Panel Options

The region panel options is defined in panel component, below is some common and added properties:

Name Type Description Default
title string The layout panel title text. null
region string Defines the layout panel position, the value is one of following: north, south, east, west, center.  
border boolean True to show layout panel border. true
split boolean True to show a split bar which user can change the panel size. false
iconCls string An icon CSS class to show a icon on panel header. null
href string An URL to load data from remote site. null
collapsible boolean Defines if to show collapsible button. true
minWidth number The minimum panel width. 10
minHeight number The minimum panel height. 10
maxWidth number The maximum panel width. 10000
maxHeight number The maximum panel height. 10000

Methods

Name Parameter Description
resize none Set the layout size.
panel region Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.
collapse region Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.
expand region Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.
add options Add a specified panel, the options parameter is a config object, see tab panel properties for more details.
remove region Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'.
Copyright © 2010-2013 www.jeasyui.com
相关文章
|
PHP Android开发
android通过http上传文件,服务器端用php写(原创)
android通过http上传文件,服务器端用php写(原创)
127 4
|
消息中间件 人工智能 移动开发
阿里云Rocket MQ PHP Http SDK发送消息示例Demo
消息队列 RocketMQ 版支持 RESTful 风格的 HTTP 协议通信,并提供了以下 7 种语言的 SDK,下面以最新的PHP Http SDK为范例介绍RocketMQ消息的发送。
3168 0
阿里云Rocket MQ PHP Http SDK发送消息示例Demo
|
7月前
|
关系型数据库 MySQL PHP
源码编译安装LAMP(HTTP服务,MYSQL ,PHP,以及bbs论坛)
通过以上步骤,你可以成功地在一台Linux服务器上从源码编译并安装LAMP环境,并配置一个BBS论坛(Discuz!)。这些步骤涵盖了从安装依赖、下载源代码、配置编译到安装完成的所有细节。每个命令的解释确保了过程的透明度,使即使是非专业人士也能够理解整个流程。
150 18
|
PHP
php 获取带http或https的域名
php 获取带http或https的域名
276 4
|
JSON 前端开发 PHP
在php里发送请求,php发送http请求的几种方法
还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群
|
前端开发 API PHP
漏刻有时API接口实战开发系列(4):萤石云HTTP接口API开发获取accessToken(php)
漏刻有时API接口实战开发系列(4):萤石云HTTP接口API开发获取accessToken(php)
605 0
|
存储 安全 PHP
为什么PHP的session的底层实现是基于HTTP cookie机制?底层原理是什么?
为什么PHP的session的底层实现是基于HTTP cookie机制?底层原理是什么?
121 0
|
前端开发 JavaScript PHP
http报文在php中的应用场景
http报文在php中的应用场景
159 0
http报文在php中的应用场景
|
Apache PHP Windows
PHP面试题:windows平台, Apache Http Server启动失败, 排错思路是什么?
PHP面试题:windows平台, Apache Http Server启动失败, 排错思路是什么?
179 0
|
PHP
[app,Http,helpers,php]laravel框架中如何添加helpers.php?(步骤详解)
  本篇文章给大家带来的内容是关于laravel框架中如何添加helpers.php?(步骤详解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
166 0