layout布局简要

layout布局简要

jquery easyui 中的layout布局提供四种：
手册上做得很好查看手册就好了
jquery easyui 1.5版本 链接
1、panel（面板）

2、tabs（选项卡）

3、accordion（分类）

4、layout（布局）

layout（布局）

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

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

折叠面板

$('#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')} //d点击按钮后执行方法   
    },{    
        iconCls:'icon-remove',    
        handler:function(){alert('remove')}    
    }]    
}); 

panel（面板）

创建面板

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>  

控制面板

<div id="p" style="padding:10px;">    
    <p>panel content.</p>    
    <p>panel content.</p>    
</div>    

$('#p').panel({    
  width:500,    
  height:150,    
  title: 'My Panel',    
  tools: [{    
    iconCls:'icon-add',    
    handler:function(){alert('new')}    
  },{    
    iconCls:'icon-save',    
    handler:function(){alert('save')}    
  }]    
});

tabs（选项卡）

创建新的选项卡， 如果存在就刷新并展示

function  addTabs(title,url){
       var tab = $('#main-tabs').tabs('exists',title);
           if(tab){
           $('#main-tabs').tabs('select', title);
          var tab = $('#tt').tabs('getSelected');  // 获取选择的面板
          tab.panel('refresh', url);

           }else{
             $('#main-tabs').tabs('add',{
             title: title,
             selected: true,
             closable:true,
             href:url

  });
}

}

accordion（分类）

 <div class="easyui-accordion" fit=true> 
      <div title="用户信息" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
       <a href="easyuiDemo/DataAp.jsp" class="a-veiwNewTab">用户列表</a></br>
       <a href="javascript:void(0)" class="a-veiwNewTab" >用户管理</a>
      </div>