下面主要是后台主页的布局。
html如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
欢迎来到后台管理系统!
</div>
</div>
</div>
</body>
</html>
js代码如下：
$(function () {
$("#tabs").tabs({
fit: true,
border: false,
});
$("#accordion").accordion({
//width: 500,
//height: 500,
fit: true,
// border: false,
// animate: false,
// multiple: true,
selected: 1,
});
function addtabs(url) { 新增tab
if ($("#tabs").tabs("exists", url)) {
$("#tabs").tabs("select", url)
}
else {
$("#tabs").tabs(
'add',
{
title: url,
closable: true,
//href: //显示的页面
});
}
}
//模拟左导航菜单
for (var i = 0; i < 2; i++) {
var content = $("<ul></ul>");
for (var j = 0; j < 2; j++) {
content.append("<li id='"+i.toString()+"_"+j.toString()+"'><a>aaaa</a></li>")
}
$('#accordion').accordion('add', {
title: i.toString(),
content: content,//'新内容',
selected: false,
});
}
$("#accordion ul li").click(function () { addtabs(this.id) });
});
css代码如下：
body {
}
.logo {
width: 180px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
float: left;
color: #fff;
}
.logout {
float: right;
padding: 30px 15px 0 0;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: blue;
}
#accordion ul {
padding: 0;
margin: 0;
list-style-type: none;
fit: inherit;
position: relative;
background:#95B8E7;
}
#accordion li {
text-align:center;
padding: 0px;
margin: 1px;
font-size:18pt;
color:black;
border:1px,solid,#95B8E7;
border-top:1px,solid,#95B8E7;
background:#E0ECFF;
}
#accordion li a{
color:black;
text-decoration:none;
}
#accordion li:hover{
background:#95B8E7;
}