jquery easyui(布局 )

来源：互联网发布：java 装饰器模式简化编辑：程序博客网时间：2024/06/04 17:56

Layout 布局

Override defaults with $.fn.layout.defaults.默认重写了 $.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.

布局这个容器有5个区域组成：北、南、东、西和中部。这个中间区域是必须的但是它的边缘区域是可选的。每一个可选的能够被重置大小通过拖拽它的边框，它们也能够被折叠通过点击它们的折叠标签。布局能够被嵌套。使得用户能够建立建立他们想要的完整的布局。

Dependencies 依赖的主件

panel 面板
resizable 大小重置

Usage Example

Create Layout 使用案例

1. Create Layout via markup. 通过标签创建布局

Add 'easyui-layout' class to <div/> markup. 在<div/>标签中添加class=“easyui-layout”

<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>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>

2. Create layout on whole page. 整个页面创建布局

<body class="easyui-layout">    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></body>

3. Create nested layout.创建嵌套布局

Notice that the west panel of inner layout is collapsed.西部区域的内部布局是折叠的

<bodyclass="easyui-layout">
<divdata-options="region:'north'"style="height:100px"></div>
<divdata-options="region:'center'">
<divclass="easyui-layout"data-options="fit:true">
<divdata-options="region:'west',collapsed:true"style="width:180px"></div>
<divdata-options="region:'center'"></div>
</div>
</div>
</body>

4. Loading content with ajax 通过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.

这是基于面板的布局。每一个面板提供的构建支持通过urls异步加载内容。使用异步加载技术，用户能够是他们的布局界面更快的显示。

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

Collpase Layout Panel 折叠布局的面板

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

Add west region panel with tool buttons 给西部区域添加按钮工具

$('#cc').layout('add',{
region:'west',
width:180,
title:'West Title',
split:true,
tools:[{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-remove',
handler:function(){alert('remove')}
}]
});

Layout Options 布局选项

NameTypeDescriptionDefaultfitbooleanSet 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

0 0