搭建layUI框架（一）

因为工作需要开发一个后端系统，用layUI，虽然这想UI出来有一段时间了，同时也比较火，但是没有用过，以前用的UI都是easyUI，或者自己画的UI，等之类的框架，本人觉得还是很不错的，当然以前的一些框架也很不错!废话不多说，上代码，哈哈

1，引用layui的js文件和Css文件就不说了，自己官网下载 https://www.layui.com/

2，页面框架搭建

2.1样式部分

<style>
    .logo-pic {
        float:left;
        height:43px;
        margin-top:5px;
        margin-left:5px;
    }
    .school-name{
        position:fixed;
        top:32px;
        left:97px;
        font-size:10px;
        font-weight:600;
        line-height:14px;
        margin-left:-45px;
        color:#eeeeee;
        
    }

    .rightmenu {
        position: absolute;
        width: 80px;
        z-index: 9999;
        display: none;
        background-color: #fff;
        padding: 2px;
        color: #333;
        border: 1px solid #eee;
        border-radius: 2px;
        cursor: pointer;
    }

        .rightmenu li {
            text-align: center;
            display: block;
            height: 25px;
            line-height: 25px;
        }

            .rightmenu li:hover {
                background-color: #666;
                color: #fff;
            }


    .layui-tab-title li:hover {
        background-color: #009688;
        color:white;
    }

    .layui-tab-titleAdd {
        background-color: #009688;
        color: white;
    }

</style>

2.2页面布局，完成，菜单部分用的json动态生成，在实际开发中可以扩展，菜单的配置从数据库中读取 

<div class="layui-layout layui-layout-admin kit-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><a href=""><img class="logo-pic" src="~/Content/images/logo3.png" /><div class="school-name" id="school-name"></div></a></div>
        <div class="layui-logo kit-logo-mobile">logo</div>
        <ul class="layui-nav layui-layout-left kit-nav" lay-filter="TopMenu" kit-one-level></ul>
        <ul class="layui-nav kit-nav layui-layout-right">
             
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="~/Content/images/noPic3.png" class="layui-nav-img"> @ViewBag.AccountName
                </a>

            </li>

            <li class="layui-nav-item" id="logoff"><a href="javascript:logoff();"><i class="fa fa-power-off" aria-hidden="true"></i> 退出</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black kit-side">
        <div class="layui-side-scroll">
            
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="nav" class="layui-nav layui-nav-tree " lay-filter="LeftMenu" kit-navbar>
                

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


    <!--左侧菜单-->
 

    <script>
 

        var data = [
            {
                "mid": 1,
                "menuName": "商户管理",
                "alink": "/Home/Main",
                "pareMenuId": 0
            },
            {
                "mid": 2,
                "menuName": "商户信息",
                "alink": "/BusinessmanMng/index",
                "pareMenuId": 1
            },
            {
                "mid": 6,
                "menuName": "设备管理", 
                "alink": "/DeviceMNG/index",  
                "pareMenuId": 1
            },
            {
                "mid": 3,
                "menuName": "aa会",
                "alink": "",
                "pareMenuId": 0
            },
            {
                "mid": 4,
                "menuName": "用户备案",
                "alink": "/GWH/Index",
                "pareMenuId": 3
            },
            {
                "mid": 5,
                "menuName": "推车管理",
                "alink": "/GWH/CarMang",
                "pareMenuId": 3
            }
        ]


        var menu = ""; //定义变量存储
        for (var i = 0; i < data.length; i++) {
            menu += "<li class='layui-nav-item'>"
            if (data[i].pareMenuId == 0) { //取出父元素的菜单，拼进页面
                menu += "<a href='javascript:;'>" + data[i].menuName + "</a>"
                for (var j = 0; j < data.length; j++) { //继续遍历这几条数据
                    /*  if (data[j].mid > data[i].mid && data[j].mid < (data[i].mid) + 1000) {*/ //取出这个父元素所对应的子元素
                    if (data[j].pareMenuId == data[i].mid) {
                        menu += "<dl class='layui-nav-child' data-id=" + data[j].mid + " data-url=" + data[j].alink + " data-title=" + data[j].menuName +">"
                        menu += "<dd>"
                        //menu += "<a href='" + data[j].alink + "'  target='option'>" + '     ' + data[j].menuName + "</a>"
                        menu += "<a   target='option'>" + '     ' + data[j].menuName + "</a>"
                        menu += "</dd>"
                        menu += "</dl>"
                    }
                }
            }
            menu += "</li>";
        }


        $("#nav").html(menu);

        $("#nav li:eq(1)").removeClass("layui-nav-item").addClass("layui-nav-item layui-nav-itemed");

    </script>

    <!-- 鼠标右键-->
    <ul class="rightmenu">
        <li data-type="closethis">关闭当前</li>
        <li data-type="closeall">关闭所有</li>
    </ul>

    <!-- 内容主体区域 -->
    <div class="layui-body" id="container" >

        <!-- <div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 请稍等...</div> -->
        <div class="layui-tab" lay-filter="demo" lay-allowclose="true"  style="margin:0; background-color:white;">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div> 
        
    </div>

</div>

2.3接下来是关键性的脚本

 layui.use('element', function () {
             var $ = layui.jquery;
             var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

             //触发事件
             var active = {
                 //在这里给active绑定几项事件，后面可通过active调用这些事件
                 tabAdd: function (url, id, name) {
                     //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                     //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                     element.tabAdd('demo', {
                         title: name,
                         //content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '.html" style="width:100%;height:99%;"></iframe>',
                         content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                         id: id //规定好的id
                     })
                     CustomRightClick(id); //给tab绑定右击事件
                     FrameWH();  //计算ifram层的大小
                 },
                 tabChange: function (id) {
                     //切换到指定Tab项
                     element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                 },
                 tabDelete: function (id) {
                     element.tabDelete("demo", id);//删除
                 }
                 , tabDeleteAll: function (ids) {//删除所有
                     $.each(ids, function (i, item) {
                         element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
                     })
                 }
             };


 //左侧菜单栏中内容 ，触发点击事件
             $('#nav .layui-nav-child').on('click', function () {
                 var dataid = $(this);

                 //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                 if ($(".layui-tab-title li[lay-id]").length <= 0) {
                     //如果比零小，则直接打开新的tab项
                     active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                 } else {
                     //否则判断该tab项是否以及存在

                     var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                     $.each($(".layui-tab-title li[lay-id]"), function () {
                         //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                         if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                             isData = true;
                         }
                     })
                     if (isData == false) {
                         //标志为false 新增一个tab项
                         active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                     }
                 }
                 //最后不管是否新增tab，最后都转到要打开的选项页面上
                 active.tabChange(dataid.attr("data-id"));
             });

function CustomRightClick(id) {
                 //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
                 $('.layui-tab-title li').on('contextmenu', function () { return false; })
                 $('.layui-tab-title,.layui-tab-title li').click(function () {
                     $('.rightmenu').hide();
                 });
                 //桌面点击右击 
                 $('.layui-tab-title li').on('contextmenu', function (e) {
                     var popupmenu = $(".rightmenu");
                     popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                     //判断右侧菜单的位置 
                     l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                     t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                     popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
                     //alert("右键菜单")
                     return false;
                 });
             }


$(".rightmenu li").on("click", function () { 
                 //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
                 if ($(this).attr("data-type") == "closethis") {
                     //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete
                     active.tabDelete($(this).attr("data-id"))
                 } else if ($(this).attr("data-type") == "closeall") {
                     var tabtitle = $(".layui-tab-title li");
                     var ids = new Array();
                     $.each(tabtitle, function (i) {
                         ids[i] = $(this).attr("lay-id");
                     })
                     //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                     active.tabDeleteAll(ids);
                 }

                 $('.rightmenu').hide(); //最后再隐藏右键菜单
             })


             function FrameWH() {
                 var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                 $("iframe").css("height", h + "px");
             }

             $(window).resize(function () {
                 FrameWH();
             })
         });

function CustomRightClick(id) {
             //取消右键 
             $('.layui-tab-title li').on('contextmenu', function () { return false; })
             $('.layui-tab-title,.layui-tab-title li').click(function () {
                 $('.rightmenu').hide();
             });
             //桌面点击右击 
             $('.layui-tab-title li').on('contextmenu', function (e) {
                 var popupmenu = $(".rightmenu");
                 popupmenu.find("li").attr("data-id", id);
                 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                 t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                 popupmenu.css({ left: l, top: t }).show();
                 //alert("右键菜单")
                 return false;
             });
         }

到这里layui 布局搭建就基本完成了

看下效果

2，接下来看看在功能页的一些要注意的地方，点击商户信息

效果是这样子的，那么怎么实现呢，，下一章介绍