文档章节

zui框架配合position实现css布局

zpedku
 zpedku
发布于 2018/07/29 15:10
字数 1334
阅读 108
收藏 0
ZUI

 

记录一下使用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>

效果如下:

© 著作权归作者所有

zpedku
粉丝 1
博文 37
码字总数 10620
作品 0
佛山
程序员
私信 提问
ZUI 移动版本 MZUI 1.0 发布

MZUI(http://zui.sexy/m/)是由ZUI前端HTML5框架作者catouse的最新作品。MZUI专为移动端设计,基于 Flex 的 UI 框架。用来开发移动 Web 应用和微信应用非常方便。该版本是MZUI第一个版本,主要...

开源春哥
2016/07/14
2.8K
7
HTML5前端 UI 框架--ZUI

zui框架是什么? zui是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案,帮助你快速构现代跨屏应用。它的特点如下: > 简单美观,易于使用,快速构建简洁大方的现代web...

开源春哥
2014/07/24
100.1K
37
HTML5 跨屏前端框架 zui 1.0 正式版本发布!

我们非常高兴的向大家介绍我们团队开发的zui框架。我们团队在开发禅道、蝉知和然之系统时,也涉及到ui框架选型的问题。我们先后经历了最初的表 格布局,到后来的yui框架,再到后来的bootstr...

开源春哥
2014/07/24
11.9K
105
2015年最全的移动WEB前端UI框架

目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下...

mdoo
2016/09/13
149
0
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
12
0

没有更多内容

加载失败,请刷新页面

加载更多

GitOps 初探

前言 GitOps 的概念最初来源于 Weaveworks 的联合创始人 Alexis 在 2017 年 8 月发表的一篇博客 GitOps - Operations by Pull Request。文章介绍了 Weaveworks 的工程师如何以 Git 作为事实的...

阿里云云栖社区
19分钟前
0
0
keytool生成密钥

生成JKS Java KeyStore文件 我们首先使用命令行工具keytool生成密钥 - 更具体地说.jks文件: keytool -genkeypair -alias mytest -keyalg RSA ...

Canaan_
22分钟前
1
0
【从入门到放弃-Java】并发编程-NIO使用

前言 上文【从入门到放弃-SpringBoot】SpringBoot源码分析-请求过程中我们了解到,tomcat接收、返回请求的过程都是基于NIO实现的。日常工作中有很多基于NIO的使用,我们知道NIO可以提高系统的...

阿里云官方博客
22分钟前
2
0
mysql 如何删除数据库中所有的表

SELECT concat('DROP TABLE IF EXISTS ', table_name, ';') FROM information_schema.tables WHERE table_schema = 'mydb'; mydb换成你想删除的数据库的名字......

RobertZhou
23分钟前
2
0
pytorch各种版本下载

链接地址:https://pytorch.org/get-started/previous-versions/

云烟成雨forever
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部