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

LayUI介绍

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

LayUI优点

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

LayUI获取方式

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

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

codelayui.code

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

LayUI使用

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

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

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

LayUI导航栏的使用

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

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

    var element = layui.element();

    }); 

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

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

        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 = '

';

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

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

                ulHtml += '

• ';

              } else {

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

              ulHtml += '

• ';

              }else{ 

              ulHtml += '

• ';

              }

              }

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

                  ulHtml += '';

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

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

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

                      } else {

                          ulHtml += ' '">' + data[i].icon + '';

                      }

                  }

                  ulHtml += '' + data[i].name + ''

                 /*  ulHtml +=''  */

                  ulHtml += '';

                  ulHtml += '

  '

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

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

                  ulHtml += '

  '"'+'class="layui-this"' +'>';

                  }else{

                  ulHtml += '

  '">';

                  }

                      

                      /* ulHtml += ''; */

                      ulHtml += ''">';

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

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

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

                          } else {

                              ulHtml += ' '">' + data[i].children[j].icon + '';

                          }

                      }

                      ulHtml += '' + data[i].children[j].name + '';

                      ulHtml += '';

                      ulHtml += '

  ';

                  }

                  ulHtml += '

  ';

              } else {

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

                  ulHtml += ''; */

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

                  ulHtml += ''">';

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

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

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

                      } else {

                          ulHtml += ' '">' + data[i].icon + '';

                      }

                  }

                  ulHtml += '' + data[i].name + ''

                  ulHtml += '';

              }

              ulHtml += '

';

        }

        ulHtml += '

';

        return ulHtml;

    }