`
javasss
  • 浏览: 65965 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

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;">&nbsp;&nbsp;<img src="${basePath}resource/images/logo.png" style="width: 35px;height: 35px;" align="bottom"/>&nbsp;&nbsp;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="south"  icon="icon-reload"  title="公司简介" split="true" style="height:80px;text-align:center;">
<div >
            xxxx科技有限公司<BR>
            电话：555-666-99-33
</div>
</div>
 
       
<div region="east" icon="icon-reload" title="系统数据信息更新" split="true" style="width:180px;">
<ul class="easyui-tree" url="tree_data.json"></ul>
</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>
分享到：
| jquery ajax 异步数据交换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics