2019独角兽企业重金招聘Python工程师标准>>> 
记录一下使用zui框架实现首页布局效果
一.css部分
body {overflow: hidden;
}.zpedku-header {position: relative;z-index: 1000;height: 40px;border-bottom:1px solid #e0e0e0;/*background-color: #eeeeee;*/
}.zpedku-side {position: fixed;top: 40px;bottom: 0;width: 200px;/*background-color: #eeeeee;*/border-right:1px solid #e0e0e0;overflow-x: hidden;overflow-y: scroll;
}.zpedku-side::-webkit-scrollbar {display: none;
}.zpedku-side .avatar {width: 200px;height: 200px;
}.zpedku-side .avatar img {display: block;margin: 10px auto 0 auto;width: 160px;height: 160px;border-radius: 50%;
}
.zpedku-side .avatar .name{display: block;margin: 10px auto 0 auto;width: 160px;height: 20px;text-align: center;color: #0a67fb;
}.zpedku-body {position: absolute;top: 40px;left: 200px;right: 0;bottom: 40px;z-index: 998;width: auto;height: 100%;overflow-y: hidden;box-sizing: border-box;/*background-color: #e0e0e0;*/
}
/*取消其最小高度限制,使iframe能撑大容器*/
.zpedku-body .tabs{min-height: 100%;
}.zpedku-footer {position: fixed;left: 200px;right: 0;bottom: 0;height: 40px;line-height: 40px;padding: 0 15px;background-color: #eee;z-index: 999;
}
二.js部分
/*页面加载完成执行*/
$(function () {init();})var Tabs;/*首页初始化*/
function init () {//reSetTabsContainerHeight();initTabs();menuTreeClicks();
}/*赋值tabs-container容器高度,由于其采用height=100%高度,无法撑起容器实际高度,需要重新赋值 发现新的原因是在于顶层父元素设置了最小高度400px */
// function reSetTabsContainerHeight () {
// var wHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// //console.log(wHeight);
// /*44px是footer的高度,需要减去*/
// $(".zpedku-body .tabs-container").height(wHeight - 44);
// }/*初始化标签页管理器*/
function initTabs () {var liElement = $('#treeMenu li.active').first();// console.log(liElement[0])var aElement = liElement.find("a").first();if (aElement.data("tab-json")) {var json = liElement.find("a").first().data("tab-json");// console.log(json)var tabs = [];tabs.push(json)$('#tabs').tabs({tabs: tabs,onCreate: function (tab) {console.log("onCreate")console.log(tab);},onOpen: function (tab) {console.log("onOpen")console.log(tab);}});//获取标签页容器Tabs = $('#tabs').data('zui.tabs');}
}/*菜单点击事件*/
function menuTreeClicks () {// 手动通过点击模拟高亮菜单项$('#treeMenu').on('click', 'a', function () {$('#treeMenu li.active').removeClass('active');$(this).closest('li').addClass('active');openTab.apply($(this).closest('li').find("a").first())});
}function openTab () {//console.log(this[0]);var json = this.data("tab-json");//console.log(json);if (json) {// console.log(json);// console.log(Tabs);Tabs.open(json)}
}
三.页面部分
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><link rel="stylesheet" href="node_modules/zui/dist/css/zui.css"><script src="node_modules/zui/dist/lib/jquery/jquery.js"></script><script src="node_modules/zui/dist/js/zui.js"></script><!--tabs插件--><link rel="stylesheet" href="node_modules/zui/dist/lib/tabs/zui.tabs.css"><script src="node_modules/zui/dist/lib/tabs/zui.tabs.js"></script><link rel="stylesheet" href="assets/css/zui.css">
</head>
<body>
<div class="zpedku-header"><nav class="navbar" role="navigation"><div class="container-fluid"><!-- 导航头部 --><div class="navbar-header"><!-- 移动设备上的导航切换按钮 --><button type="button" class="navbar-toggle" data-toggle="collapse"data-target=".navbar-collapse-example"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!-- 品牌名称或logo --><a class="navbar-brand" href="#">Zpedku</a></div><!-- 导航项目 --><div class="collapse navbar-collapse navbar-collapse-example"><!-- 一般导航项目 --><ul class="nav navbar-nav"><li class="active"><a href="#">项目</a></li><li><a href="#">需求</a></li><!-- 导航中的下拉菜单 --><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a><ul class="dropdown-menu" role="menu"><li><a href="#">任务</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="your/nice/url">帮助</a></li><li class="dropdown"><a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">探索 <b class="caret"></b></a><ul class="dropdown-menu" role="menu"><li><a href="your/nice/url">敏捷开发</a></li><li><a href="your/nice/url">HTML5</a></li><li><a href="your/nice/url">Javascript</a></li><li class="divider"></li><li><a href="your/nice/url">探索宇宙</a></li></ul></li></ul></div><!-- END .navbar-collapse --></div></nav>
</div>
<div class="zpedku-side"><div class="avatar"><img src="assets/img/timg.jpg"><span class="name">大道寺知世</span></div><div class="menu"><nav class="menu" data-ride="menu" style="width: 200px"><ul id="treeMenu" class="tree tree-menu" data-ride="tree"><li class="active"><a href="#" data-tab-json='{"id":1,"title":"首页","url":"boostrap.html","type":"iframe","forbidClose":true}'><i class="icon icon-th"></i>首页</a></li><li><a href="#"><i class="icon icon-user"></i>系统信息管理</a><ul><li><a href="#" data-tab-json='{"id":2,"title":"权限信息","url":"index.html","type":"iframe","forbidClose":false}'>权限信息</a></li><li><a href="#">角色分配</a></li><li><a href="#">资源分配</a></li></ul></li><li><a href="#"><i class="icon icon-time"></i>学生信息管理</a><ul><li><a href="#">学生信息</a></li><li><a href="#">床位管理</a></li><li><a href="#">水电信息</a></li></ul></li><li><a href="#"><i class="icon icon-trash"></i>宿舍信息管理</a><ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li></ul></li><li><a href="#"><i class="icon icon-trash"></i>宿舍员信息管理</a><ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li></ul></li><li><a href="#"><i class="icon icon-trash"></i>进出 登记信息管理</a><ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li></ul></li><li><a href="#"><i class="icon icon-list-ul"></i>全部</a></li><!--<li class="open">--><!--<a href="#"><i class="icon icon-tasks"></i>状态</a>--><!--<ul>--><!--<li>--><!--<a href="#"><i class="icon icon-circle-blank"></i>已就绪</a>--><!--<ul>--><!--<li><a href="#">已取消</a></li>--><!--<li><a href="#">已关闭</a></li>--><!--</ul>--><!--</li>--><!--<li class="active"><a href="#"><i class="icon icon-play-sign"></i>进行中</a></li>--><!--<li><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li>--><!--</ul>--><!--</li>--></ul></nav></div>
</div>
<div class="zpedku-body"><div class="tabs" id="tabs"><nav class="tabs-navbar"></nav><nav class="tabs-container"></nav></div>
</div>
<div class="zpedku-footer">© zpedku.com</div><script src="assets/js/zpedkuInit.js"></script>
<script>// 定义标签页var tabs = [{title: 'iframe 例子',url: 'boostrap.html',type: 'iframe',forbidClose: true}, {title: 'Ajax 例子',url: 'docs/partial/remote-tab.html',type: 'ajax'}, {title: '自定义例子',icon: 'icon-star',type: 'custom',content: function() {return '<div class="alert alert-block alert-success"><p>这里的内容是通过函数动态生成的，每次刷新下面的时间都会更新。</p><p>' + (new Date().format('yyyy-MM-dd hh:mm:ss')) + '</p></div>';}}, {title: 'MZUI',url: 'http://zui.sexy/m',type: 'iframe'}, {defaultTitle: '无法加载的标签页',url: 'http://zui1.sexy'}];// 初始化标签页管理器// $('#tabs').tabs({// tabs: tabs,// onOpen: function (tab) {// console.log(tab);// }// });//// var myTabs = $('#tabs').data('zui.tabs');//// //// $('#treeMenu').on('click', 'a', function () {// $('#treeMenu li.active').removeClass('active');// $(this).closest('li').addClass('active');// // console.log($(this).data("tab-json"))// if($(this).data("tab-json")){// var tab = $(this).data("tab-json");// console.log(tab);// }//// });</script>
</body>
</html>
效果如下:
