zui框架配合position实现css布局

最新推荐文章于 2024-03-31 09:36:10 发布

weixin_34384681

最新推荐文章于 2024-03-31 09:36:10 发布

阅读量647

点赞数

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/u/2426590/blog/1915693

版权

2019独角兽企业重金招聘Python工程师标准>>>

记录一下使用zui框架实现首页布局效果

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

/*页面加载完成执行*/
$(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)

  }
}

三.页面部分

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

效果如下:

转载于:https://my.oschina.net/u/2426590/blog/1915693