Layui前端框架导航栏使用介绍

LayUI介绍

Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。

LayUI优点

由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支持响应式。

LayUI获取方式

直接打开官网http://www.layui.com下载或者通过GitHub下载，实际项目应该在官网下载稳定的版本。

下载后你可以看到layUI的目录结构如下，直接复制layui目录到的项目中即可。

codelayui.code
 
 
    ├─css //css目录
    │  └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font  //字体图标目录
    ├─images //图片资源目录（一些表情等）
    │  └─face
    └─lay //JS目录
        ├─dest //经过合并的完整模块
        └─modules //各模块/组件
      

LayUI使用

需要引入layui的js和css文件，引入方式如下：

<!-- layoutui -->

<link rel="stylesheet" href="<%=realPath%>/layui/css/layui.css" media="all">

<script  src="<%=realPath%>/layui/layui.js"></script>

LayUI导航栏的使用

注意点:假如引入layui.js而不是layui.all.js时需要在<script></script>标签中引入

layui.use('element', function(){

    var element = layui.element();

    }); 

代码，类似于加载layui模块的元素才能正常使用导航栏。

1.在<script></script>标签中定义导航栏的结构如下：

        var checkManageTree = [

               {

             name: "产品",

             alias:"产品",

                href:"",

               state:{

            selected:isCurrent("产品",false)

        }

               },

               {

             name: "供方",

             alias:"供方",

                href:"",

               state:{

            selected:isCurrent("供方",false)

        }

                }];

2.定义添加导航的导航栏的div如下：

<!-- 左侧导航 -->

<div id="left" class="site-text" lay-filter="left-div">

</div>

3.通过id获取div标签初始化导航栏视图，getHtml()方法负责根据代码动态生成导航栏视图

   $( '#left' ).html(getHtml(checkManageTree));

    4.getHtml()方法的实现，通过动态创建导航栏可以减少重复代码，只需要定义json的格式的导航栏即可

/**

     * 获取html字符串

     * @param {Object} data

     */

    function getHtml(data) {

        var ulHtml = '<ul class="layui-nav layui-nav-tree" id="leftMenuUl">';

        for (var i = 0; i < data.length; i++) {

            if (data[i].spread !== undefined &&data[i].spread) {

                ulHtml += '<li class="layui-nav-item layui-nav-itemed">';

            } else {

            if(data[i].state.selected !== undefined && data[i].state.selected){

            ulHtml += '<li class="layui-nav-item layui-this">';

            }else{ 

            ulHtml += '<li class="layui-nav-item">';

            }

            }

            if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {

                ulHtml += '<a href="javascript:;">';

                if (data[i].icon !== undefined && data[i].icon !== '') {

                    if (data[i].icon.indexOf('fa-') !== -1) {

                        ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

                    } else {

                        ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

                    }

                }

                ulHtml += '<cite>' + data[i].name + '</cite>'

               /*  ulHtml +='<span class="layui-nav-more"></span>'  */

                ulHtml += '</a>';

                ulHtml += '<dl class="layui-nav-child">'

                for (var j = 0; j < data[i].children.length; j++) {

                if(data[i].children[j].state.selected){

                ulHtml += '<dd title="' + data[i].children[j].name +'"'+'class="layui-this"' +'>';

                }else{

                ulHtml += '<dd title="' + data[i].children[j].name + '">';

                }

                    

                    /* ulHtml += '<a href="javascript:;" data-url="' + data[i].children[j].href + '">'; */

                    ulHtml += '<a href="'+data[i].children[j].href+'">';

                    if (data[i].children[j].icon !== undefined && data[i].children[j].icon !== '') {

                        if (data[i].children[j].icon.indexOf('fa-') !== -1) {

                            ulHtml += '<i class="fa ' + data[i].children[j].icon + '" data-icon="' + data[i].children[j].icon + '" aria-hidden="true"></i>';

                        } else {

                            ulHtml += '<i class="layui-icon" data-icon="' + data[i].children[j].icon + '">' + data[i].children[j].icon + '</i>';

                        }

                    }

                    ulHtml += '<cite>' + data[i].children[j].name + '</cite>';

                    ulHtml += '</a>';

                    ulHtml += '</dd>';

                }

                ulHtml += '</dl>';

            } else {

                /* var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';

                ulHtml += '<a href="javascript:;" ' + dataUrl + '>'; */

                var dataUrl =  (data[i].href !== undefined && data[i].href !== '') ? data[i].href  : '';

                ulHtml += '<a href="'+dataUrl+'">';

                if (data[i].icon !== undefined && data[i].icon !== '') {

                    if (data[i].icon.indexOf('fa-') !== -1) {

                        ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

                    } else {

                        ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

                    }

                }

                ulHtml += '<cite>' + data[i].name + '</cite>'

                ulHtml += '</a>';

            }

            ulHtml += '</li>';

        }

        ulHtml += '</ul>';

        return ulHtml;

    }