layui使用导航菜单、选项卡

作者： Stanley 罗昊

【转载请注明出处和署名，谢谢！】

【编程工具：IDEA】

导航菜单

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

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

 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>

我们在编辑上运行后，可以看到运行结果：

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

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

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

2

3       })

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

运行效果：

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

切换导航菜单的样式（默认水平）

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

layui-nav-tree

具体添加方式如下：

执行效果：

代码分析

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

layui-nav-item代表子项

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

默认产品这一列选中；

子项的子项

layui-nav-child

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

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

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

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

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

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

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

个人信息状态栏放在紧靠其他功能中有些不美观，我们可以加以调整（右浮动）：

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

选项卡

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

风格说明

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>

执行结果：

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

执行效果：

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

执行效果：

代码分析

layui-tab代表选项卡

layui-tab-title代表卡片的头

layui-this是否选中（默认选中，注意这个功能要搭配layui-show同时使用不然会出现标题与内容不符）

layui-tab-content代表卡片的内容的包装体

layui-tab-item具体的卡片内容

layui-show启用显示（让第一个内容优先显示）

动态Tab（可以删除的tab）

lay-allowclose="true"

执行效果：

巴特西

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

layui使用导航菜单、选项卡

导航菜单

切换导航菜单的样式（默认水平）

代码分析

子项的子项

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

选项卡

风格说明

代码分析

动态Tab（可以删除的tab）

最新文章

热门文章

巴特西

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

layui使用 导航菜单、选项卡

导航菜单

切换导航菜单的样式（默认水平）

代码分析

子项的子项

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

选项卡

风格说明

代码分析

动态Tab（可以删除的tab）

最新文章

热门文章

layui使用导航菜单、选项卡