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

简介: Layout 布局 依赖 panel resizable 用法示例 创建 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'

目录
相关文章
|
JavaScript API C#
jQuery EasyUI API 中文文档 - 树(Tree)
Tree 树 用 $.fn.tree.defaults 重写了 defaults。 依赖 draggable droppable 用法 Tree 能在 元素里定义,此标记可以定义为叶节点和子节点。
1087 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 树表格(TreeGrid)
TreeGrid 树形表格 扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 1.
1342 0
|
JavaScript API 关系型数据库
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
1013 0
|
JavaScript API 索引
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1297 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 消息框(Messager)
Messager 消息框 用 $.messager.defaults 重写了 defaults。 依赖 window linkbutton progressbar 用法 1.
940 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 对话框(Dialog)
Dialog 对话框 扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。 依赖 window linkbutton 用法 1. 2.     Dialog Content.   3. 1. $('#dd').dialog({   2.     modal:true 3. });  特性 其特性扩展自 window,下列是为 dialog 重写的特性。
847 0
|
JavaScript API 容器
jQuery EasyUI API 中文文档 - 窗口(Window)
Window 窗口    扩展自 $.fn.panel.defaults,用 $.fn.window.defaults 重写了 defaults。 依赖 draggable resizable panel 用法 1.
743 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 时间微调器(TimeSpinner)
TimeSpinner 时间微调器 扩展自 $.fn.spinner.defaults,用 $.fn.timespinner.defaults 重写了 defaults。 依赖 spinner 用法 1. 1. $('#ss').timespinner({   2.     showSeconds:true 3. });  特性 其特性扩展自 spinner,下列是为 timespinner 增加的特性。
844 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 微调器(Spinner)
Spinner 微调器 扩展自 $.fn.validatebox.defaults,用 $.fn.spinner.defaults 重写了 defaults。 依赖 validatebox 用法 1. 1. $('#ss').spinner({   2.     required:true,   3.     increment:10   4. });  特性 其特性扩展自 validatebox,下列是为 spinner 增加的特性。
892 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 数值微调器(NumberSpinner)
NumberSpinner 数值微调器 扩展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults,用 $.fn.numberspinner.defaults 重写了 defaults。
1088 0
相关产品
云迁移中心
推荐文章
更多