Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs
前言
我又回來辣
雖然并沒有人在等我。
做的并不好看。。。。還有一些功能有bug，但是有點(diǎn)沒動(dòng)力了，畫個(gè)階段激勵(lì)一下自己
效果：
整體是這樣的，index的首頁放了一只皮卡丘，皮卡丘愛你哦~
藍(lán)后，這只是個(gè)板板，木有后臺(tái)數(shù)據(jù)我也沒加主頁登錄判定，連左邊的面板都是寫死的沒有用json動(dòng)態(tài)導(dǎo)入嗚嗚嗚。。我好菜啊，回來再改吧。
結(jié)構(gòu)
康康目錄：
主頁用到的就是這三個(gè)文件，其它的亂七八糟的還沒弄好先放著回來再說。。。
代碼
反正沒人看。。一個(gè)個(gè)來，完整代碼不放了以后可以找我要，反正我現(xiàn)在也還沒寫完
tabs文件引入
首先 tabs 標(biāo)簽頁管理器的js，標(biāo)簽管理器要引入額外的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里面包一個(gè)布局容器，ZUI提供了三種布局容器，這個(gè)container-fluid是寬和高都占頁面100%的一種
no-padding是去除了這個(gè)容器的邊框，使它跟頁面緊貼住
<body><!--布局容器--> <div class="container-fluid no-padding"></div> <body>頂部navbar
頂部放了一個(gè)長(zhǎng)長(zhǎng)的navbar，使用navbar-fixed-top類讓它緊貼在最上頭。
然后畫了個(gè)圖做logo，我用axure畫的圖嘻嘻，畫完保存頁面為圖片，我覺得我真的懶到家了。
以下代碼，為了控制logo和標(biāo)題的位置我做了一些神奇的操作。。右邊兩個(gè)按鈕沒啥用，因?yàn)槲疫€沒想好右邊要放啥，直接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"><!--標(biāo)頭--><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;">友譜網(wǎng)絡(luò)數(shù)據(jù)標(biāo)注工具</span></div></div></div><!--右側(cè)導(dǎo)航項(xiàng)目--><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">敏捷開發(fā)</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>哦對(duì)了這里的logo是有定義css的，不過這個(gè)css根據(jù)圖片而定沒啥意義，很簡(jiǎn)單的
.logo{width:45px;height:45px;margin:7.5px; }頁面左右分開
這個(gè)是用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;這一句是為了點(diǎn)擊按鈕收起的時(shí)候做的滑動(dòng)收起效果
然后html頁面在navbar下面添加兩個(gè)div，class分別是上面的那個(gè)左和右，就可以了
menu?
左邊的這個(gè)menu其實(shí)可以直接用ZUI提供的treemenu，但是我嫌那個(gè)不好看，用cards自己弄了一個(gè)menu。
思路就是，點(diǎn)擊收起用card里面套ZUI的折疊組件實(shí)現(xiàn)，然后。。。沒有然后了，就這樣。
由于這個(gè)外發(fā)光和顏色轉(zhuǎn)換的js我沒寫好，有一點(diǎn)bug而且非常亂，所以不給你們看，但是還是放一下html的代碼，，，因?yàn)槔锩嬗衪abs需要的部分
在左邊的div里面加入以下代碼：
<!--菜單--><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":"數(shù)據(jù)獲取","url":"getdata.html","type":"iframe"}'>數(shù)據(jù)獲取</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>實(shí)體識(shí)別</a></div></div></div>我好菜啊。。。直接把它寫死了，耦合太高，以后要改成json動(dòng)態(tài)的。。。
tabs 標(biāo)簽頁管理器
html的代碼很簡(jiǎn)單，直接在標(biāo)簽頁里面寫上tabs就行，style是為了向下錯(cuò)開頂層的那個(gè)navbar，不要被navbar擋住
<div class="page-right"><div class="tabs" id="tabs" style="height:calc(100% - 70px);margin:70px 10px 0px;"></div></div接下來是js的代碼：
首先導(dǎo)入自己的js文件，因?yàn)樘嗔宋曳至宋募鰜?#xff0c;這是我的js的位置
<script src="../static/myjs/main.js"></script>js代碼：
/*頁面加載完成執(zhí)行*/ $(function () {init(); })var Tabs;/*首頁初始化*/ function init () {initTabs();//初始化標(biāo)簽menuClicks();//點(diǎn)擊菜單更新標(biāo)簽頁hideMenu();//隱藏菜單事件 }/*初始化標(biāo)簽頁管理器*/ 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);}});//獲取標(biāo)簽頁容器Tabs = $('#tabs').data('zui.tabs');} } /*菜單點(diǎn)擊事件*/ 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);} }那個(gè)hideMenu是后面隱藏左邊菜單欄的按鈕的js function，之后再放
然后這個(gè)代碼選取左邊的menuCards 里面的card里面的文字 a 標(biāo)簽 作為鏈接，打開一個(gè)新的tab。
上面card的html里面寫好的代碼的這個(gè)屬性：
data-tab-json='{"id":3,"title":"數(shù)據(jù)獲取","url":"getdata.html","type":"iframe"}'
id是tab的唯一標(biāo)識(shí)，就是點(diǎn)擊這個(gè)再點(diǎn)擊一次這個(gè)的話不會(huì)重復(fù)打開已經(jīng)打開的頁面，
title是打開頁面的titile
url就是打開的url，type是用iframe的方式打開。。。
其它的屬性可以去ZUI的官網(wǎng)看文檔自己找。
就醬。
縮進(jìn)菜單效果
這個(gè)其實(shí)很好玩，首先要放一個(gè)按鈕在屏幕上，我設(shè)置了浮動(dòng)按鈕的css：
.float-button{ position: absolute; z-index:1; height: 90px; width: 40px; top: 50%; left: 185px; transition: 0.8s all; }這個(gè)z-index是優(yōu)先級(jí)，越高的越在上層。設(shè)置成1是因?yàn)檫€有一個(gè)是0
設(shè)置了絕對(duì)位置，頁面正中左邊185px的地方，剛好是我那一條線的左邊：
就這里。
然后在html里面把它放上去，放在什么地方都行，我放在最外層了，body下面。反正是浮動(dòng)的。
<!--隱藏菜單的懸浮按鈕--> <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的圖標(biāo)，那個(gè)小箭頭，id是方便后面js的選取。
然后是js，這個(gè)隱藏其實(shí)非常有意思，它是給每個(gè)組件設(shè)置了兩套css，點(diǎn)擊按鈕把第一套換成第二套。
下面是第二套page-left和page-right，還有那個(gè)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設(shè)置為0，為了button能在它的上層。不設(shè)置的話button會(huì)被蓋住。
這兩個(gè)page的新css基本上只是修改了位置，button也只是修改了位置。。。
然后在js里面設(shè)置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');} })}點(diǎn)擊按鈕事件，首先用toggleClass修改這三個(gè)地方的class，完成滑動(dòng)收縮效果
然后下面的if是把左邊的箭頭換成向右的箭頭
效果是這樣：
咦
我沒法上傳圖片了。。。。嗚嗚嗚展示不了效果，這什么bug
那就這樣。
?
card的css還有bug，我加了一個(gè)外發(fā)光和點(diǎn)擊變色，但是嵌套二層的時(shí)候有bug，回來再改。
?
以上
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联想小新校园活动推广策划案
- 下一篇： 2017年html5行业报告,云适配发布