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>