分享程序员开发的那些事...
更新时间：2022-03-16 03:55:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>童梦无忧后台</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/easy_ui/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easy_ui/js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="js/easy_ui/css/easyui.css" />
<!--<link rel="stylesheet" href="css/homepage.css" />
<link rel="stylesheet" href="css/common.css" />-->
<style>
body {
overflow: hidden;
height: 100%;
}
.panel {
height: 100%;
overflow-y: auto;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
}
.all-title {
margin-left: 350px;
font-size: 14px;
line-height: 48px;
}
.left_box {
width: 200px;
font-size: 14px;
background: blueviolet;
color: red;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow-y: auto;
/*出现滚动条*/
}
.right_box {
margin-left: 200px;
height: 100%;
}
.left_highlight {
background: blue;
height: 30px;
display: block;
line-height: 30px;
padding-left: 20px;
overflow: hidden;
}
.son_menu {
background: green;
}
.son_menu li {
height: 40px;
line-height: 40px;
color: #fff;
padding-left: 59px;
border-bottom: 1px solid red;
}
.son_menu li a {
color: #fff;
}
.son_menu li.selected {
background: brown;
}
.workstation {
height: 48px;
width: 100%;
overflow: hidden;
background: palevioletred;
}
.userInfo {
width: 350px;
font-size: 14px;
line-height: 48px;
color: black;
margin: 0 auto;
border: 1px solid red;
}
.quit {
margin-left: 30px;
font-size: 16px;
cursor: pointer;
border: 1px solid blue;
}
.quit i {
margin-right: 5px;
margin-top: 2px;
}
.tabs-panels {
border-color: blue;
height: 800px;
}
#tt {
width: 100%;
height: 700px;
overflow-y: auto;
}
/*自定义 easy UI */
.tabs-header,
.tabs-tool {
background: peru;
}
div.tabs-header {
border: 1px solid green;
}
ul.tabs {
border-bottom: 1px solid #cacacd;
height: 34px;
}
.tabs li.tabs-selected a.tabs-inner {
background: pink;
color: black;
}
.tabs li a.tabs-inner {
background: #f2f2f2;
color: #5a5a5a;
border: 1px solid red;
padding: 0 25px;
border-radius: 0px;
}
.tabs li a.tabs-inner:hover {
background: yellow;
}
.tabs li.tabs-selected a.tabs-inner {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="containers">
<div class="left_box">
<ul class="left_ul">
<li class="left_list">
<span class="left_highlight">APP版本管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('添加APPle','versions_add.html')">添加APP版本</a>
</li>
<li>
<a href="javascript:;" onclick="addTabs('APP版本列表','https://www.baidu.com/')">APP版本列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">消息管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('消息推送','')">消息推送</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">帖子管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('主帖列表','invitation.html')">主帖列表</a>
</li>
<li>
<a href="javascript:;" onclick="addTabs('分配推荐','')">分配推荐</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">聊天室管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('聊天室管理','')">聊天室管理</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">漂流瓶管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('问题列表','bottle.html')">问题列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">预约管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('预约列表','')">预约列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">文章管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('文章上传','')">文章上传</a>
</li>
<li>
<a href="javascript:;" onclick="addTabs('文章列表','')">文章列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">提现管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('提现列表','')">提现列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">举报管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('举报列表','')">举报列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">用户管理</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('用户列表','')">用户列表</a>
</li>
</ul>
</li>
<li class="left_list">
<span class="left_highlight">设置</span>
<ul class="son_menu">
<li>
<a href="javascript:;" onclick="addTabs('修改密码','')">修改密码</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="right_box">
<div class="workstation">
<!--<div class="fl" style="margin-left: 350px">-->
<!--童梦无忧后台-->
<!--</div>-->
<div class="userInfo">
当前登录用户：<span>sdfasd</span>
<span class="quit"><i class="glyphicon glyphicon-off"></i>退出</span>
</div>
</div>
<div id="tt">
</div>
</div>
</div>
<!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->
<script type="text/javascript">
$(function() {
var heightSon = document.body.scrollHeight - 48;
$(".panel-body").height(heightSon);
$(".tabs-panels").height(heightSon);
$("#tt").height(heightSon);
$(".mainweb").height(heightSon - 30);
var url1 = 'https://www.baidu.com/';
var heightSon = document.body.scrollHeight - 48;
$("#tt").tabs({});
//默认打开百度
var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0" src="' + url1 + '" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add', {
title: '百度，你好',
content: content,
closable: true,
});
$(".son_menu li").click(function() {
$(this).addClass("selected").siblings("li").removeClass("selected");
$(this).parents(".left_list").siblings(".left_list").find(".son_menu").children("li").removeClass("selected");
})
})
//添加tabs
function addTabs(title, url) {
if ($('#tt').tabs('exists', title)) { //判断是否存在此选项卡
$('#tt').tabs('select', title);
$('#tt').tabs('update', {
tab: select
});
} else {
var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add', {
title: title,
content: content,
closable: true,
});
}
// var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
// $('#tt').tabs('add', {
// title: title,
// content: content,
// closable: true,
// });
}
//全部显示
var heightSon = document.body.scrollHeight - 48;
function modified(wer) {
$(".panel-body").height(heightSon);
$(".tabs-panels").height(heightSon);
$("#tt").height(heightSon);
$(".mainweb").height(heightSon - 30);
}
</script>
</body>
</html>