前言

我又回来辣

虽然并没有人在等我。

做的并不好看。。。。还有一些功能有bug，但是有点没动力了，画个阶段激励一下自己

效果：

整体是这样的，index的首页放了一只皮卡丘，皮卡丘爱你哦~

蓝后，这只是个板板，木有后台数据我也没加主页登录判定，连左边的面板都是写死的没有用json动态导入呜呜呜。。我好菜啊，回来再改吧。

结构

康康目录：

主页用到的就是这三个文件，其它的乱七八糟的还没弄好先放着回来再说。。。

代码

反正没人看。。一个个来，完整代码不放了以后可以找我要，反正我现在也还没写完

tabs文件引入

首先 tabs 标签页管理器的js，标签管理器要引入额外的css和js，不包含在<link rel="stylesheet" href="../static/dist/css/zui.min.css">里面。

css

<link rel="stylesheet" href="../static/dist/lib/tabs/zui.tabs.css">

js

<script src="../static/dist/lib/tabs/zui.tabs.js"></script>

布局容器

然后开始在body里面包一个布局容器，ZUI提供了三种布局容器，这个container-fluid是宽和高都占页面100%的一种

no-padding是去除了这个容器的边框，使它跟页面紧贴住

<body><!--布局容器-->
<div class="container-fluid no-padding"></div>
<body>

顶部navbar

顶部放了一个长长的navbar，使用navbar-fixed-top类让它紧贴在最上头。

然后画了个图做logo，我用axure画的图嘻嘻，画完保存页面为图片，我觉得我真的懒到家了。

以下代码，为了控制logo和标题的位置我做了一些神奇的操作。。右边两个按钮没啥用，因为我还没想好右边要放啥，直接copy了ZUI上面的例子。

<!--顶部方块栏-->
<nav class="navbar bg-primary navbar-fixed-top" role="navigation" style="width: 100%; height:60px;"><div class="container"><div class="row"><div class="col col-lg-6  col-md-6 col-sm-6 col-xs-9"><!--标头--><div class="row"><div class="col col-lg-2  col-md-2 col-sm-3 col-xs-3"><img class="logo" src="../static/photos/logo.png"></div><div class="col col-lg-10  col-md-10 col-sm-9 col-xs-9" style="margin:15px 0px 0px;"><span style="font-size:20px;">友谱网络数据标注工具</span></div></div></div><!--右侧导航项目--><ul class="nav navbar-nav navbar-right" style="margin:10px 0px 0px;"><li><a href="your/nice/url"><i class="icon icon-off" style="background-color:#3280FC"></i></a></li><li class="dropdown"><a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown"><i class="icon icon-bars"></i><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></div></nav>

哦对了这里的logo是有定义css的，不过这个css根据图片而定没啥意义，很简单的

.logo{width:45px;height:45px;margin:7.5px;
}

页面左右分开

这个是用css做的，首先引入我自己的css：

    <!--这一页用到的css--><link rel="stylesheet" href="../static/mycss/main.css">

然后css里面定义左边类和右边类

body, html {margin: 0;padding: 0;height: 100%;width: 100%;font-family: sans-serif;
}
.page-left{position: fixed;top: 40px;bottom: 0;width: 200px;border-right:1px solid #e0e0e0;overflow-x: hidden;overflow-y: scroll;transition: 0.8s all;background-color:#EBF2F9;
}
.page-right {position: absolute;top: 0px;left: 200px;right: 0;bottom: 0px;width: auto;height: 100%;overflow-y: hidden;box-sizing: border-box;transition: 0.8s all;}

别的都好理解，transition: 0.8s all;这一句是为了点击按钮收起的时候做的滑动收起效果

然后html页面在navbar下面添加两个div，class分别是上面的那个左和右，就可以了

<!--菜单--><div class="cards" id="menuCards" style="width: 200px;margin:20px 0px 0px;"><div class="card card-out" id="card_1" style="margin:4px;"><div class="card-heading center-block" data-toggle="collapse" data-target="#collapseOne"><a href="#"data-tab-json='{"id":1,"title":"首页","url":"first.html","type":"iframe","forbidClose":false}'>首页</a></div></div><div class="card card-out" id="card_2" style="margin:4px;"><div class="card-heading center-block" data-toggle="collapse" data-target="#"><a href="#"data-tab-json='{"id":2,"title":"用户信息","url":"user.html","type":"iframe"}'>用户信息</a></div></div><div class="card card-out" id="card_3" style="margin:4px;"><div class="card-heading center-block" data-toggle="collapse" data-target="#"><a href="#"data-tab-json='{"id":3,"title":"数据获取","url":"getdata.html","type":"iframe"}'>数据获取</a></div></div><div class="card card-out" id="card_4" style="margin:4px;"><div class="card-heading center-block" data-toggle="collapse" data-target="#collapseTextCategory">文本分类</div><div class="card-body collapse " id="collapseTextCategory"style="background-color:#FBFBFB;border-top:1px dashed #e0e0e0;"><div class="card card-out" id="card_4_1" style="margin:0px 5px;"><a class="card-heading"data-tab-json='{"id":4,"title":"TEXT-CNN","url":"textcategory/textcnn_main.html","type":"iframe"}'>TEXT-CNN</a></div></div></div><div class="card card-out" id="card_5" style="margin:4px;"><div class="card-heading center-block" data-toggle="collapse" data-target="#"><a>实体识别</a></div></div></div>

我好菜啊。。。直接把它写死了，耦合太高，以后要改成json动态的。。。

tabs 标签页管理器

html的代码很简单，直接在标签页里面写上tabs就行，style是为了向下错开顶层的那个navbar，不要被navbar挡住

   <div class="page-right"><div class="tabs" id="tabs" style="height:calc(100% - 70px);margin:70px 10px 0px;"></div></div

接下来是js的代码：

首先导入自己的js文件，因为太多了我分了文件出来，这是我的js的位置

<script src="../static/myjs/main.js"></script>

js代码：

/*页面加载完成执行*/
$(function () {init();
})var Tabs;/*首页初始化*/
function init () {initTabs();//初始化标签menuClicks();//点击菜单更新标签页hideMenu();//隐藏菜单事件
}/*初始化标签页管理器*/
function initTabs () {var cardElement = $('#menuCards').first();var aElement = cardElement.find("a").first();if (aElement.data("tab-json")) {var json = cardElement.find("a").first().data("tab-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 menuClicks () {$('#menuCards div.card').on('click', 'a', function () {openTab.apply($(this).closest('div').find("a").first());});
}function openTab () {var json = this.data("tab-json");if (json) {Tabs.open(json);}
}

那个hideMenu是后面隐藏左边菜单栏的按钮的js function，之后再放

然后这个代码选取左边的menuCards 里面的card里面的文字 a 标签作为链接，打开一个新的tab。

上面card的html里面写好的代码的这个属性：

data-tab-json='{"id":3,"title":"数据获取","url":"getdata.html","type":"iframe"}'

id是tab的唯一标识，就是点击这个再点击一次这个的话不会重复打开已经打开的页面，

title是打开页面的titile

url就是打开的url，type是用iframe的方式打开。。。

其它的属性可以去ZUI的官网看文档自己找。

就酱。

缩进菜单效果

这个其实很好玩，首先要放一个按钮在屏幕上，我设置了浮动按钮的css：

.float-button{
position: absolute;
z-index:1;
height: 90px;
width: 40px;
top: 50%;
left: 185px;
transition: 0.8s all;
}

这个z-index是优先级，越高的越在上层。设置成1是因为还有一个是0

设置了绝对位置，页面正中左边185px的地方，刚好是我那一条线的左边：

就这里。

然后在html里面把它放上去，放在什么地方都行，我放在最外层了，body下面。反正是浮动的。

<!--隐藏菜单的悬浮按钮-->
<div class="float-button no-padding"><button class="btn btn-mini icon icon-chevron-left no-padding" id="inbutton" type="button" style="width:15px;height:30px;color:#145CCD"></button>
</div>

nopadding隐藏了边距，icon是ZUI的图标，那个小箭头，id是方便后面js的选取。

然后是js，这个隐藏其实非常有意思，它是给每个组件设置了两套css，点击按钮把第一套换成第二套。

下面是第二套page-left和page-right，还有那个button的css：

.page-left-in{position: fixed;top: 40px;bottom: 0;width: 0px;border-right:0px solid #e0e0e0;overflow-x: hidden;overflow-y: hidden;transition: 0.8s all;
}
.page-right-out {z-index:0;position: absolute;top: 0px;left: 0px;right: 0;bottom: 0px;width: auto;height: 100%;overflow-y: hidden;box-sizing: border-box;transition: 0.8s all;
}.float-button-on{
position: absolute;
z-index:1;
height: 90px;
width: 40px;
top: 50%;
left: 0px;
transition: 0.8s all;
}

这里把右边page-right的z-index设置为0，为了button能在它的上层。不设置的话button会被盖住。

这两个page的新css基本上只是修改了位置，button也只是修改了位置。。。

然后在js里面设置button的click事件

//隐藏左边菜单栏事件
function hideMenu(){
$('#inbutton').on('click',function () {$('.float-button').toggleClass('float-button-on');$('.page-left').toggleClass('page-left-in');$('.page-right').toggleClass('page-right-out');if ($(this).hasClass('icon-chevron-left')){$(this).removeClass('icon-chevron-left').addClass('icon-chevron-right');}else{$(this).removeClass('icon-chevron-right').addClass('icon-chevron-left');}
})}

点击按钮事件，首先用toggleClass修改这三个地方的class，完成滑动收缩效果

然后下面的if是把左边的箭头换成向右的箭头

效果是这样：

咦

我没法上传图片了。。。。呜呜呜展示不了效果，这什么bug

那就这样。

card的css还有bug，我加了一个外发光和点击变色，但是嵌套二层的时候有bug，回来再改。

以上

Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs相关推荐

Flask+ZUI 开发小型工具网站（三）——登录功能
前言一堆bug,一路坎坷,终于弄好了... 我不打算弄注册,反正只有我自己用啊哈哈哈哈,用户的数据库都没弄后端flask 项目结构先看一下项目结构: 酱婶儿的 usercontroller 只有 ...
IOS开发常用工具网站地址
IOS工具网站 http://www.scoop.it/t/ios-dev ios 工具推荐网站 http://blog.devtang.com/blog/2012/12/02/use-cocoa ...
php开发小型商务网站,基于PHP的校园小型商务网站设计──校园服务平台-论文...
基于PHP的校园小型商务网站设计──校园服务平台-论文基于PHP的校园小型商务网站设计校园服务平台摘要校园服务平台是基于PHP建立的校园小型商务网站.前台主要运用了html.css.Javascr ...
IOS开发常用工具网站
证书管理 iOS 开发者中心 https://developer.apple.com/devcenter/ios ...
利用cocos2dx 3.2开发消灭星星（四）游戏主场景
第二节说到在菜单场景MenuScene中加入一个菜单并且加入一个开始按钮切换到GameScene,下面我们来讲一下游戏的主界面GameScene和GameLayer 一.主场景GameScene Ga ...
flask python web开发可视化开发_Python + Flask 项目开发实践系列六
今天开始我们讲讲Flask Web实践项目开发中的查看详情功能是如何实现的. Step1:html 部分 lists +="<tr>"+ //拼凑一段html片段 &q ...
IE8“开发人员工具”使用详解上(各级菜单详解)
http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html 你还没有安装IE8? 如果你是前端开发人员, ...
python web开发项目源码_Python + Flask 项目开发实践系列七
对于 Python + Flask 这种灵活的web开发框架,在前面的六个系列文章中详细的进行了说明,主要讲到了页面的首页加载时的页面渲染,增加功能,删除功能,修改功能,查询功能,查询详情功能等一些页 ...
前端开发应知网站(转载)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
程序员常用的工具网站
程序员常用的工具网站免费书籍数据库在线制作流程图 java开发常用工具网站程序开发导航面试常看的网站在线编程系统设计 springboot学习参考网站云服务器 LINUX命令学习免费 ...

Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs

前言

效果：

结构

代码