jquery easyui 上下布局关键代码实现 _Web前端

jquery easyui 左右布局关键代码实现
/**
* 创建者：javasss
* 功能：在切换面板中添加标签
*/
function addTab(title, href) {
var tt = $('#tt');
if (tt.tabs('exists', title)) {
tt.tabs('select', title);
} else {
if (href) {
var content = href;
} else {
$.messager.alert('系统温馨提示', '【' + title + '】链接窗口已经打开', 'info');
var content = '未实现';
}
tt.tabs('add', {
title : title,
closable : true,
icon : 'icon-save',
href : content
});

}
}

/**
* 创建者：javasss
* 功能：css 布局控制
*/
.items{

width: 100%;
height: 120px;

}
.imagesItems{
margin-top:20px;
width: 90px;
height: 90px;
text-align: center;
cursor: pointer;
}

加入jquery-easyui二个js库和二个css库
html页面
</head>
<body class="easyui-layout">
<div region="north" split="true" closable="false" style="height:70px;padding:0px;background:#fff;">
<div class="easyui-layout" fit="true" style="background:#fff;">
<div region="center" style="color:blue; font-size:20px; font-weight:600;padding: 8px;">  <img src="${basePath}resource/images/logo.png" style="width: 35px;height: 35px;" align="bottom"/>  xx数据监测系统
<div style="width: 180px; height: 28px; line-height:15px; font-size:14px;color:#000; font-family:100; position: absolute; top: 2px; right: 2px; text-indent:20px; background: url('${basePath}resource/images/userborder.png');">
<span class="display:inline-block; width:120px; ">您好，$!{user.name}</span> | <span style="cursor: pointer;"><a href="${basePath}secure/OutSystem.action" style="text-decoration: none;">[退出]</a></span>
</div>

</div>

</div>
</div>

<div region="west" split="true" icon="icon-add" title="操作导航" style="width:200px;padding1:1px;overflow:hidden; text-align:center;">
<div class="easyui-accordion" fit="true" border="false">
<div title="[@]在线情况" selected="true" style="overflow:auto;">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('在线情况','${basePath}secure/UserOnLine.action')"/> <br/>
                                 在线情况
                     </div>

</div>
<div title="[@]工作量压力统计" style="padding:10px;">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('工作量压力统计','${basePath}secure/UserWorkloadPressure.action')"/> <br/>
                                 工作量压力统计
                     </div>
</div>
<div title="[@]员工工作情况">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('员工工作情况','${basePath}secure/UserWorkingCondition.action')"/> <br/>
                                 员工工作情况
                     </div>

</div>
<div title="[@]用户活跃度统计">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('用户活跃度统计','${basePath}secure/UserActivity.action')"/> <br/>
                                 用户活跃度统计
                     </div>

</div>
<div title="[@]访问网址历史记录">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('访问网址历史记录','${basePath}secure/EditorWorkRecord.action')"/> <br/>
                              访问网址历史记录
                     </div>

</div>

<div title="[@]浏览器发布网址痕迹">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('浏览器发布网址痕迹','${basePath}secure/PublishArticleRecord.action')"/> <br/>
                                 浏览器发布网址痕迹
                     </div>

</div>

<div title="[@]文章活跃度统计">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('文章活跃度统计','${basePath}secure/ArticleClickRate.action')"/> <br/>
                                文章点击率排行榜
                     </div>

</div>
<div title="[@]采集器日志分析">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('采集器日志分析','${basePath}secure/LocoySpiderLog.action')"/> <br/>
                                 采集器日志分析
                     </div>

</div>
<div title="考核报表">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('考核报表','queryJson')"/> <br/>
                                 考核报表
                     </div>

</div>
<div title="[@]分析器状态">
                    <div class="items" >
                     <img src="${basePath}resource/images/userOnLine.png" class="imagesItems" onclick="addTab('分析器状态','${basePath}secure/AnalyzerStatus.action')"/> <br/>
                                 分析器状态
                     </div>

</div>

</div>
</div>

<div region="center" icon="icon-remove" title="工作区" style="overflow:hidden;">
<div class="easyui-tabs" id="tt" fit="true" border="false">
<div id="data" title="欢迎页面" icon="icon-reload" closable="false" style="overflow:hidden;padding:5px;font-size: 30px; color: blue;text-align: center;">
<div style="margin: 200px;">
xx数据监测系统<br/>-欢迎使用-
</div>
</div>
</div>
</div>
</body>
</html>