可以隐藏显示侧边栏,可以tab方式菜单

分享 未结
2 4026
stock2
stock2 2017-12-31
悬赏:20飞吻
一直想要个简单的后台,就三个功能
1.可以方便隐藏和显示,有时表格列内容太多.
2.tab方式,方便切换.
3.支持tab栏(顶部),再点击链接,可以再tab新增.,
也希望更多的好功能加入.


用到方法有 小洋 http://fly.layui.com/jie/20966/
用到方法有 随❤所☆预 http://fly.layui.com/jie/16408/

回帖
  • stock2
    2017-12-31
    晕的很,发了分享结果忘记给代码了.抱歉.
    就一个index.html 下面是代码
    其他的都是layui的, 是2.2.45版本 放在同文件夹下即可.
    ------------------------------------------------
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
    <div class="layui-header ">
    <div class="layui-logo">管理系统</div>
    <div class="layui-layout-left" style="margin-top:18px; font-size:16px; color:#FFF;" id="navSorH">隐藏左侧</div>

    <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>

    <li class="layui-nav-item">
    <a href="http://www.shuyangyang.com.cn">退出系统</a>
    </li>
    </ul>
    </div>

    <div id="leftA" class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
    <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
    <ul class="layui-nav layui-nav-tree" lay-filter="left-menu">
    <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">系统菜单</a>
    <dl class="layui-nav-child">
    <dd id="A001" name=""><a href="javascript:;">菜单一</a></dd>
    <dd id="A002" name=""><a href="javascript:;">菜单二</a></dd>
    <dd id="A003" name=""><a href="javascript:;">菜单三</a></dd>
    <dd id="A004" name="http://www.baidu.com"><a href="javascript:;">baidu</a></dd>
    </dl>
    </li>
    <li class="layui-nav-item">
    <a href="javascript:;">列表菜单</a>
    <dl class="layui-nav-child">
    <dd id="B001" name=""><a href="javascript:;">列表一</a></dd>
    <dd id="B002" name=""><a href="javascript:;">列表二</a></dd>
    <dd id="B003" name=""><a href="javascript:;">列表三</a></dd>
    </dl>
    </li>

    </ul>
    </div>
    </div>

    <div class="layui-body" style="bottom: 0px;">
    <div style="padding-left: 15px">
    <!-- 内容主体区域 -->
    <div class="layui-tab" lay-allowClose="true" lay-filter="tab-switch">
    <ul class="layui-tab-title">
    <li class="layui-this" >首页</li>
    </ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    内容1
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    <script >
    layui.use(['element','jquery'],function(){
    element = layui.element;
    $ = layui.jquery;

    var i=0;
    $('#navSorH').click(function(){
    if(i==0){
    $(".layui-side").animate({width:'0px'});
    $(".layui-body").animate({left:'0px'});
    $(this).text("显示左侧导航");
    i++;
    }else{
    $(".layui-side").animate({width:'200px'});
    $(".layui-body").animate({left:'200px'});
    $(this).text("隐藏左侧导航");
    i--;
    }

    });

    //监听左侧菜单点击
    element.on('nav(left-menu)', function(elem){
    addTab(elem[0].innerText,elem[0].attributes[1].nodeValue,elem[0].id);
    });
    //监听tab选项卡切换
    element.on('tab(tab-switch)', function(data){
    if(data.elem.context.attributes != undefined){
    var id = data.elem.context.attributes[0].nodeValue;
    layui.each($(".layui-nav-child"), function () {
    $(this).find("dd").removeClass("layui-this");
    });
    $("#"+id).attr("class","layui-this");
    }
    });
    });

    /**
    * 新增tab选项卡,如果已经存在则打开已经存在的,不存在则新增
    * @param tabTitle 选项卡标题名称
    * @param tabUrl 选项卡链接的页面URL
    * @param tabId 选项卡id
    */
    function addTab(tabTitle,tabUrl,tabId){
    if ($(".layui-tab-title li[lay-id=" + tabId + "]").length > 0) {
    element.tabChange('tab-switch', tabId);
    }else{
    element.tabAdd('tab-switch', {
    title: tabTitle
    ,content: '<iframe src='+tabUrl+' width="100%" style="min-height: 500px;" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>' // 选项卡内容,支持传入html
    ,id: tabId //选项卡标题的lay-id属性值
    });
    element.tabChange('tab-switch', tabId); //切换到新增的tab上
    }
    }

    /**
    * ifrme自适应页面高度,需要设定min-height
    * @param iframe
    */
    function setIframeHeight(iframe) {
    if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
    }
    };

    </script>
    5 回复
  • stock2
    2017-12-31
    新增的菜单一,对应的地址.例如 1.html
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>1</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
    </head>
    <body >

    <div id="11" >测试11</div>

    <div id="22" >测试22</div>

    </body>
    </html>

    <script>
    layui.use(['jquery'],function(){

    $ = layui.jquery;

    $("#11").click(function(){
    parent.addTab("测试11","","T11");
    });
    $("#22").click(function(){
    parent.addTab("测试22","","T22");
    });



    });

    </script>
    4 回复
本帖已设置禁止回复