當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2023/12/16 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

我又回來辣

雖然并沒有人在等我。

做的并不好看。。。。還有一些功能有bug，但是有點沒動力了，畫個階段激勵一下自己

效果：

整體是這樣的，index的首頁放了一只皮卡丘，皮卡丘愛你哦~

藍后，這只是個板板，木有后臺數(shù)據(jù)我也沒加主頁登錄判定，連左邊的面板都是寫死的沒有用json動態(tài)導入嗚嗚嗚。。我好菜啊，回來再改吧。

結(jié)構(gòu)

康康目錄：

主頁用到的就是這三個文件，其它的亂七八糟的還沒弄好先放著回來再說。。。

代碼

反正沒人看。。一個個來，完整代碼不放了以后可以找我要，反正我現(xiàn)在也還沒寫完

tabs文件引入

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

css

js

布局容器

然后開始在body里面包一個布局容器，ZUI提供了三種布局容器，這個container-fluid是寬和高都占頁面100%的一種

no-padding是去除了這個容器的邊框，使它跟頁面緊貼住

頂部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;">友譜網(wǎng)絡數(shù)據(jù)標注工具</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">敏捷開發(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>

哦對了這里的logo是有定義css的，不過這個css根據(jù)圖片而定沒啥意義，很簡單的

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

頁面左右分開

這個是用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的折疊組件實現(xiàn)，然后。。。沒有然后了，就這樣。

由于這個外發(fā)光和顏色轉(zhuǎn)換的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":"數(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>實體識別</a></div></div></div>

我好菜啊。。。直接把它寫死了，耦合太高，以后要改成json動態(tài)的。。。

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的位置

js代碼：

/*頁面加載完成執(zhí)行*/ $(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":"數(shù)據(jù)獲取","url":"getdata.html","type":"iframe"}'

id是tab的唯一標識，就是點擊這個再點擊一次這個的話不會重復打開已經(jīng)打開的頁面，

title是打開頁面的titile

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

其它的屬性可以去ZUI的官網(wǎng)看文檔自己找。

就醬。

縮進菜單效果

這個其實很好玩，首先要放一個按鈕在屏幕上，我設置了浮動按鈕的css：

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

這個z-index是優(yōu)先級，越高的越在上層。設置成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，我加了一個外發(fā)光和點擊變色，但是嵌套二層的時候有bug，回來再改。

以上

總結(jié)

以上是生活随笔為你收集整理的Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：联想小新校园活动推广策划案
下一篇： juns java,Java中的基本數據