zui框架配合position實現css佈局

時間 2019-11-11

標籤 zui 框架配合 position 實現 css 佈局欄目 CSS 简体版

原文原文鏈接

記錄一下使用zui框架實現首頁佈局效果javascript

一.css部分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部分html

/*頁面加載完成執行*/
$(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)

  }
}

三.頁面部分 java

<!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>

效果以下:node

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。