Layout 布局 mmmm ぃ→ ぷ彪翻译。不当之处，敬请指正

来源：互联网发布：域策略禁止安装软件编辑：程序博客网时间：2024/06/05 18:29

依赖

panel
resizable

用法示例

创建 Layout

1. 通过标签创建布局

为<div/>标签增加名为'easyui-layout'的类ID。

<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',iconCls:'icon-reload',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>

2. 使用完整页面创建布局

<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',iconCls:'icon-reload',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>

3. 创建嵌套布局

注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

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

4. 通过ajax读取内容

布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术，用户可以使自己的布局页面显示的内容更多更快。

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

折叠布局面板

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

添加西侧区域面板和工具菜单按钮

$('#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')}        }]    });

布局属性

事件

区域面板属性

区域面板属性定义与panel组件类似，下面的是公共的和新增的属性：

方法

1 0