Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs
前言
我又回來辣
雖然并沒有人在等我。
做的并不好看。。。。還有一些功能有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分別是上面的那個左和右，就可以了
menu?
左邊的這個menu其實可以直接用ZUI提供的treemenu，但是我嫌那個不好看，用cards自己弄了一個menu。
思路就是，點擊收起用card里面套ZUI的折疊組件實現，然后。。。沒有然后了，就這樣。
由于這個外發光和顏色轉換的js我沒寫好，有一點bug而且非常亂，所以不給你們看，但是還是放一下html的代碼，，，因為里面有tabs需要的部分
在左邊的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":"數據獲取","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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联想小新校园活动推广策划案
- 下一篇： 修复IOS上滑动HTML界面光标乱跳