简单后台UI框架
界面效果：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="BXUI.js"></script>
<link type="text/css" rel="stylesheet" href="BXUI.css"/>
<link type="text/css" rel="stylesheet" href="BXUI.portal.css"/>
<script type="text/javascript">
$(function () {
BXUI.load("portal");
});
</script>
</head>
<body>
<div style="height: 100px;"></div>
</body>
</html>
JS代码：
/**
* User: 906699
* Date: 14-3-17
* Time: 下午4:17
* Version: 0.99
*/
var BXUI = {};
BXUI.load = function (_module, _config) {
BXUI[_module].init(_config);
};
BXUI.portal = {
options:{
navUrl:"json/menu.json",
renderTo:"body"
},
init:function (_config) {
var me = this;
$.extend(me.options, _config, true);
me.initTpl();
me.doLayout();
me.initNav();
window.portal = this;
$(window).on("resize", function () {
me.doLayout();
});
},
doLayout:function () {
var bdw = $("body").innerWidth(),
bdh = $("body").innerHeight(),
center = $(".portal-center"),
pages = $(".portal-pages");
center.width(bdw - 200);
pages.height(bdh - 36 - 100);
},
initTpl:function () {
var me = this,
tpl = "<div class='portal-west'>" +
"<div class='portal-nav'></div>" +
"</div>" +
"<div class='portal-center'>" +
"<div class='portal-tabs'></div>" +
"<div class='portal-pages'></div>" +
"</div>" +
"<div class='portal-south'></div>";
$(me.options.renderTo).append(tpl);
},
initNav:function () {
var me = this;
$.ajax({
url:me.options.navUrl,
dataType:"json"
}).done(function (response) {
var menu = $("<ul>").attr({
"class":"portal-menu",
"onselectstart":"return false;"
});
for (var i = 0; i < response.length; i++) {
var children = response[i].children,
menuItem = $("<li>").addClass("portal-menu-item"),
lvl1 = $("<div>").addClass("lvl1").text(response[i].text),
lvl2 = $("<ul>").addClass("lvl2");
for (var j = 0; j < children.length; j++) {
lvl2.append(
$("<li>").append(
$("<a>").attr("href", "javascript:void();")
.text(children[j].text)
.data(children[j])
.bind("click", function (e) {
e.preventDefault();
me.openPage($(this).data("text"), $(this).data("url"));
})
)
);
}
lvl1.bind("click", me.menuItemClick);
menuItem.append(lvl1).append(lvl2);
menu.append(menuItem);
}
$(".portal-nav").append(menu);
});
},
menuItemClick:function () {
if ($(this).hasClass("lvl1-focus")) {
$(this).parent().removeClass("portal-menu-item-focus");
$(this).removeClass("lvl1-focus");
$(this).next().hide();
} else {
$(this).parent().addClass("portal-menu-item-focus");
$(this).addClass("lvl1-focus");
$(this).next().show();
}
},
opened:{},
openPage:function (title, url) {
var me = this;
$(".portal-tabs .focus").removeClass("focus");
$(".portal-pages .focus").removeClass("focus");
if (url in me.opened) {
me.opened[url].tab.addClass("focus");
me.opened[url].page.addClass("focus");
return;
}
var closeIcon = $("<div>").addClass("close").text("╳")
.bind({
click:function () {
me.closeTab($(this).parent().data("url"));
}
}),
tab = $("<div>").addClass("tab focus")
.text(title)
.data("url", url)
.append(closeIcon).bind({
click:function () {
me.activateTab($(this).data("url"));
}
}),
page = $("<iframe>").attr({
width:"100%",
height:"100%",
frameBorder:"0",
src:url
}).addClass("focus");
me.opened[url] = {
tab:tab,
page:page
};
$(".portal-tabs").append(tab);
$(".portal-pages").append(page);
},
activateTab:function (url) {
var me = this;
// 移除当前的激活的tab
$(".portal-tabs .focus").removeClass("focus");
$(".portal-pages .focus").removeClass("focus");
// 给要激活的tab加上焦点样式
me.opened[url].tab.addClass("focus");
me.opened[url].page.addClass("focus");
},
closeTab:function (url) {
var me = this;
var currTab = me.opened[url].tab,
currPage = me.opened[url].page,
nextTab = currTab.next(),
nextPage = currPage.next(),
prevTab = currTab.prev(),
prevPage = currPage.prev();
currTab.remove();
currPage.remove();
delete me.opened[url];
if (currTab.hasClass("focus")) {
if (nextTab.length > 0) {
nextTab.addClass("focus");
nextPage.addClass("focus");
return;
}
if (prevTab.length > 0) {
prevTab.addClass("focus");
prevPage.addClass("focus");
return;
}
}
}
};
CSS代码：
BXUI.portal.css
.portal-pages {
position: relative;
z-index: 3;
background: #ffffff;
border-left: 1px solid #858585;
box-sizing: border-box;
}
.portal-pages iframe {
position: absolute;
top: 0;
left: 0;
background: #ffffff;
z-index: 1;
}
.portal-pages iframe.focus {
z-index: 5;
}
.portal-tabs .tab {
position: relative;
float: left;
width: 150px;
height: 34px;
text-align: center;
line-height: 34px;
color: #AFAFAF;
cursor: pointer;
border-right: 1px solid #858585;
}
.tab .close {
color: #ff0000;
position: absolute;
top: 0;
right: 0;
width: 16px;
line-height: 16px;
cursor: pointer;
}
.portal-tabs .focus {
border-bottom: 1px solid #FFF;
color: #000;
z-index: 5;
}
.portal-menu {
width: 180px;
margin-left: 5px;
}
.portal-menu-item {
margin-bottom: 5px;
border: 1px solid #cacaca;
background: #fff;
color: #858585;
}
.portal-menu-item-focus {
border: 1px solid #858585;
color: #525252;
}
.lvl1 {
cursor: pointer;
line-height: 34px;
padding-left: 30px;
position: relative;
}
.lvl1-focus {
border-bottom: 1px solid #858585;
}
.lvl2 {
display: none;
}
.lvl2 li {
line-height: 30px;
padding-left: 57px;
}
.portal-west {
width: 200px;
float: left;
}
.portal-center {
float: left;
}
.portal-nav {
width: 100%;
height: 40px;
}
.portal-tabs{
height: 34px;
border-left: 1px solid #858585;
border-top: 1px solid #858585;
border-bottom: 1px solid #858585;
background: #ffffff;
}
BXUI.css
html, body, ul, li {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
font-family: 'Microsoft YaHei';
}
html, body {
height: 100%;
}
body {
background: #FAFAFA;
}
table {
table-layout: fixed;
width: 100%;
height: 100%;
}
a {
outline: none;
}
a:link {
color: #525252;
text-decoration: none;
}
a:hover {
color: #f40;
}
menu.json
[
{
"id":1,
"text":"系统管理",
"icon":"sys",
"children":[
{
"id":2,
"text":"角色管理",
"icon":"role",
"url":"role.html"
},
{
"id":3,
"text":"用户管理",
"icon":"user",
"url":"user.html"
}
]
},
{
"id":4,
"text":"数据管理",
"icon":"sys",
"children":[
{
"id":5,
"text":"访问统计",
"icon":"role",
"url":"visit.html"
},
{
"id":6,
"text":"服务配置",
"icon":"user",
"url":"grid.html"
}
]
}
]