1.前言.
easy ui有两种布局,一种是在div上面布局,一种是直接body全局布局,一般div布局用得比较多。本文主要参照http://www.cnblogs.com/Philoo/archive/2011/10/01/jeasyui_api_layout.html。
2.布局实现方法 。
依赖•panel•resizable用法示例创建 Layout
经由标记创建 Layout 。添加 'easyui-layout' 类到 <div/> 标记。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</div>
在整个页面上创建 Layout。
<body class="easyui-layout">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</body>
折叠 Layout Panel
$('#cc').layout();
// 折叠 west panel
$('#cc').layout('collapse','west');
3.参数的解释.
Layout Panel 选项名称
类型
说明
默认值
title
string
Layout panel 的标题文字。
null
region
string
定义 layout panel 的位置,其值是下列之一:north、south、east、west、center。
border
boolean
True 就显示 layout panel 的边框。
true
split
boolean
True 就显示拆分栏,用户可以用它改变panel 的尺寸。
false
iconCls
string
在panel 头部显示一个图标的CSS 类。
null
href
string
从远程站点加载数据的 URL 。
null
方法名称
参数
说明
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'。
本文转自:http://www.cnblogs.com/Philoo/archive/2011/10/01/jeasyui_api_layout.html
分享到:
相关推荐
在这个名为“最新jquery-easy-ui”的压缩包中,我们重点关注的是版本 1.2.6。 ### 1. jQuery 基础 jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理、动画以及 Ajax 交互。EasyUI 建立在 jQuery ...
《jQuery Easy UI 离线API文档详解及CSS设计技巧》 jQuery Easy UI 是一个基于jQuery的前端开发框架,它提供了丰富的UI组件,使得开发者能够快速构建出美观且功能强大的Web应用。离线API文档是开发者在无网络环境下...
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
### jQuery Easy UI 知识点概览 #### 1. 基本拖放功能 在jQuery Easy UI中,拖放功能是通过`draggable()`方法实现的,它允许将HTML元素变成可拖动的对象。在给定的教程中,通过创建三个不同的`<div>`元素并使用`...
Easy-Ui的布局组件如`<div class="easyui-layout">`允许你将页面划分为多个区域(如北、南、东、西、中),通过调整各个区域的大小和位置,实现灵活的页面布局。同时,你可以使用`<div class="easyui-panel">`来创建...
6. **Layout(布局)**: 提供了多种布局模式,如 border、stacked、accordion 等,方便组织和管理页面元素。 ### 四、EasyUI API 中文版 `EasyUI官方API中文版.exe` 文件很可能是 EasyUI 的官方文档的中文版,通常...
**jQuery Easy UI 中文帮助手册** 是一份详细指导开发者如何使用 jQuery Easy UI 框架的文档,旨在帮助用户更好地理解和应用这个强大的前端开发工具。jQuery Easy UI 是基于 jQuery 的一个轻量级、易于使用的组件库...
通过结合 jQuery EasyUI 的组件,如 `datagrid`、`tabs` 和 `layout`,可以实现更复杂的课程表布局和功能。 总结来说,jQuery EasyUI 提供了丰富的 UI 控件和便捷的拖放功能,使 web 开发者能快速构建功能强大的...
1. **组件(Widgets)**: jQuery Easy UI 提供了一系列的组件,包括但不限于:`datagrid`(数据网格)、`form`(表单)、`dialog`(对话框)、`menu`(菜单)、`layout`(布局)、`tabs`(选项卡)、`tree`(树形...
Easy-UI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和强大的功能,使得开发者在构建用户界面时能够快速而高效。这个“非常好用的Easy-UI前段框架”显然是一个已经集成了多种功能的解决方案,特别是针对...
EasyUI 提供了丰富的UI控件,如表格、对话框、菜单、表单、树形结构等,极大地简化了网页开发的工作量。 ### 1. jQuery EasyUI 的核心特性 - **轻量级**:jQuery EasyUI 基于 jQuery,本身体积小巧,加载速度快。 ...
jQuery Easy UI 提供了栅格布局(Layout)和浮动布局(Box),可以帮助开发者快速创建响应式和自适应的页面结构。 4. **组件间的交互**: 通过事件监听和回调函数,可以实现组件间的交互。例如,当点击表格的一行...
jQuery Easy UI 包含了诸如对话框、表格、表单、菜单、树形控件、按钮、布局等常见的UI组件,这些组件都经过精心设计,符合Web2.0的标准,同时支持响应式设计,适应不同设备的显示需求。框架的核心理念是简化开发...
首先,Easy-Ui的核心组件包括布局(Layout)、表格(Grid)、表单(Form)、按钮(Button)、对话框(Dialog)、菜单(Menu)等,这些组件覆盖了后台管理系统的常见需求。例如,布局组件可以帮助我们合理划分页面...
7. **布局(Layout)**:Easy UI 提供了多种布局模式,如网格(grid)、面板(panel)、窗口(window)等,帮助开发者构建复杂的页面结构。 8. **主题和样式**:Easy UI 提供了一些预定义的主题,可以改变控件的...
`easy-ui`则是另一个基于jQuery的前端框架,它集成了数据网格(DataGrid)、表单(Form)、菜单(Menu)、布局(Layout)等组件。Easy-UI的目标是使网页开发变得更加简单,它提供了一套易于使用的API,使得开发者...
总之,jQuery EasyUI的Layout布局功能是构建后台管理页面的强大工具,结合实例代码,开发者可以快速创建出专业且功能完善的管理界面。通过学习和掌握这一技术,可以极大地提升Web应用的用户体验和开发效率。
9. **布局(Layout)**:Layout组件可以轻松实现页面的分栏布局,支持垂直和水平划分,以及动态调整各部分的大小。 10. **菜单(Menu)**:Menu组件用于创建下拉菜单或侧边栏菜单,支持多级菜单结构,可与页面其他...
- **组件丰富**:jQuery EasyUI 提供了包括布局(Layout)、表格(Grid)、表单(Form)、菜单(Menu)、对话框(Dialog)、按钮(Button)等多种 UI 组件,覆盖了常见的网页交互需求。 - **易于使用**:基于 jQuery...
3. **布局(Layout)**:布局组件允许你将页面分割成多个区域,每个区域可以独立调整大小和位置。这对于创建复杂的、可自定义的工作区特别有用。 4. **窗帘(Curtain)**:虽然“窗帘”在描述中未明确提及,但可能...