jQuery EasyUI API 中文文档 - 布局(Layout)

简介: Layout 布局 依赖panelresizable用法示例创建 Layout经由标记创建 Layout 。添加 'easyui-layout' 类到 标记。1. 2. 3. 4. 5. 6. 7. 在整个页面上创建 Layout。
+关注继续查看

Layout 布局

依赖

  • panel
  • resizable

用法示例

创建 Layout

经由标记创建 Layout 。添加 'easyui-layout' 类到 <div/> 标记。

1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">

2. <div region="north" title="North Title" split="true" style="height:100px;"></div>

3. <div region="south" title="South Title" split="true" style="height:100px;"></div>

4. <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>

5. <div region="west" split="true" title="West" style="width:100px;"></div>

6. <div region="center" title="center title" style="padding:5px;background:#eee;"></div>

7. </div>

在整个页面上创建 Layout

1. <body class="easyui-layout">

2. <div region="north" title="North Title" split="true" style="height:100px;"></div>

3. <div region="south" title="South Title" split="true" style="height:100px;"></div>

4. <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>

5. <div region="west" split="true" title="West" style="width:100px;"></div>

6. <div region="center" title="center title" style="padding:5px;background:#eee;"></div>

7. </body>

折叠 Layout Panel

1. $('#cc').layout();  

2. // 折叠 west panel

3. $('#cc').layout('collapse','west'); 

Layout Panel 选项

名称

类型

说明

默认值

title

string

Layout panel 的标题文字。

null

region

string

定义 layout panel 的位置,其值是下列之一:northsoutheastwestcenter

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'

目录
相关文章
|
8月前
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
66 0
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
121 0
|
JavaScript 前端开发
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
2025 0
|
JavaScript 容器
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
1864 0
|
JavaScript 前端开发 开发者
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
1742 0
相关产品
云迁移中心
推荐文章
更多