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>