layui使用 导航菜单、选项卡

作者 : Stanley 罗昊

【转载请注明出处和署名,谢谢!】

【编程工具:IDEA】

导航菜单

在layui官网中示例中,我们可以找到关于导航的例子:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 我们点击查看代码,将其代码复制到自己的编辑器上;

 1 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
 2   <legend>水平导航菜单</legend>
 3 </fieldset>
 4
 5 <ul class="layui-nav">
 6   <li class="layui-nav-item"><a href="">最新活动</a></li>
 7   <li class="layui-nav-item layui-this">
 8     <a href="javascript:;">产品</a>
 9     <dl class="layui-nav-child">
10       <dd><a href="">选项1</a></dd>
11       <dd><a href="">选项2</a></dd>
12       <dd><a href="">选项3</a></dd>
13     </dl>
14   </li>
15   <li class="layui-nav-item"><a href="">大数据</a></li>
16   <li class="layui-nav-item">
17     <a href="javascript:;">解决方案</a>
18     <dl class="layui-nav-child">
19       <dd><a href="">移动模块</a></dd>
20       <dd><a href="">后台模版</a></dd>
21       <dd class="layui-this"><a href="">选中项</a></dd>
22       <dd><a href="">电商平台</a></dd>
23     </dl>
24   </li>
25   <li class="layui-nav-item"><a href="">社区</a></li>
26 </ul>

我们在编辑上运行后,可以看到运行结果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 但是,我们依然发现一些问题就是,当我们鼠标悬停的时候,并不会触发悬停事件:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

所以是,现在你也只是仅仅的将样式引入了进来,如果你想让它有效果,那么必须要跟js挂钩,因为都知道,js是逻辑,一般都是由它来控制页面的逻辑效果,所以我们只需要加入下面这段代码即可:

1       layui.use(['element'],function (){
2
3       })

只需要引入这行代码,其他的啥也不用动即可,因为Layui已经对其封装好了,并且我们在Layui的目录就可以查询到这个模块的位置:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 运行效果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 加上代码后,再次运行我们发现,该有效果都有了,也有悬停动画了。

切换导航菜单的样式(默认水平)

我们刚刚用的导航是水平的方式,我们当然可以切换成垂直,我们只需要在原本的样式上添加一行代码即可切换样式:

layui-nav-tree

具体添加方式如下:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 执行效果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

代码分析

layui-nav 代表这个是导航菜单

layui-nav-item代表子项

layui-this代表当前选中的项(这个代码是平级,比如上面那个产品 大数据,现在选中的是产品,我们可以通过this来更改默认选中的列表)示例:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 默认产品这一列选中;

子项的子项

layui-nav-child

所以说,这像是一个层级菜单一样,可以类似于套娃一样

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 添加个人信息以及登录状态显示栏

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 一般,这个功能在后台管理的导航栏中,是必须要有的,可以登出,也可以显示个人信息,所以我们有必要来看一下,这个是如何实现的,我们找到源码:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

<li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>

我们把它拼接到自己的导航栏上试一下:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 因为它就是一个li,我们也只需要把它放在现成的ul里面即可,我们看下运行效果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 完美运行,无缝拼接,也算是layui的魅力之一吧。

个人信息状态栏放在紧靠其他功能中有些不美观,我们可以加以调整(右浮动):

      <li class="layui-nav-item" lay-unselect="" style="float: right">

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 选项卡

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 在官方文档的介绍中,我们发现有许多样式的选项卡,比如有默认风格的、动态操作的、有简洁的卡片的。

风格说明

1.默认风格,默认风格我们只用加layui-tab

 1 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
 2   <legend>默认风格的Tab</legend>
 3 </fieldset>
 4
 5 <div class="layui-tab">
 6   <ul class="layui-tab-title">
 7     <li class="layui-this">网站设置</li>
 8     <li>用户管理</li>
 9     <li>权限分配</li>
10     <li>商品管理</li>
11     <li>订单管理</li>
12   </ul>
13   <div class="layui-tab-content">
14     <div class="layui-tab-item layui-show">
15       1. 高度默认自适应,也可以随意固宽。
16       <br>2. Tab进行了响应式处理,所以无需担心数量多少。
17     </div>
18     <div class="layui-tab-item">内容2</div>
19     <div class="layui-tab-item">内容3</div>
20     <div class="layui-tab-item">内容4</div>
21     <div class="layui-tab-item">内容5</div>
22   </div>
23 </div>

执行结果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

2.简洁风格 简洁风格我们只需要在本体是加上brief(layui-tab-brief)

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 执行效果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

3.卡片风格跟上述一样,后缀加上card

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

执行效果:Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

代码分析

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

    layui-tab代表选项卡

layui-tab-title代表卡片的头
layui-this是否选中(默认选中,注意这个功能要搭配layui-show同时使用不然会出现标题与内容不符)
layui-tab-content代表卡片的内容的包装体
layui-tab-item具体的卡片内容

layui-show启用显示(让第一个内容优先显示)

动态Tab(可以删除的tab)

lay-allowclose="true"

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

 执行效果:

Java程序员必备后台前端框架--Layui【从入门到实战】(二)-LMLPHP

03-05 23:12