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

';


        return ulHtml;

    }









你可能感兴趣的:(Java拓展)