顶部广告位

Layout(布局)

使用$.fn.layout.defaults重写默认值对象。

布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。

依赖关系

panel

resizable

示例

创建布局

1. 通过标签创建布局

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

<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>

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

<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>

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

方法

方法名 方法属性 描述
resize none 设置布局大小。
panel region 返回指定面板,'region'参数可用值有:'north','south','east','west','center'。
collapse region 折叠指定面板。'region'参数可用值有:'north','south','east','west'。
expand region 展开指定面板。'region'参数可用值有:'north','south','east','west'。
add options 添加指定面板。属性参数是一个配置对象,更多细节请查看选项卡面板属性。
remove region 移除指定面板。'region'参数可用值有:'north','south','east','west'。

鄂ICP备16023636号 © 2017 菜鸟程序员