Layui快速入门之第五节导航

最新推荐文章于 2024-08-31 14:31:49 发布

渊婉

最新推荐文章于 2024-08-31 14:31:49 发布

阅读量2k

点赞数

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132852901

版权

这篇博客详细介绍了Layui的导航菜单，包括基本概念、导航依赖的element模块，以及API、属性和事件的使用。内容涵盖水平导航、垂直导航、侧边垂直导航、导航主题和面包屑导航的实现方法，特别强调了动态渲染和事件监听在导航菜单中的应用。

摘要由CSDN通过智能技术生成

一：基本概念

导航是指支持用户导航、进入和退出应用中不同内容片段的交互。导航菜单包含水平导航和垂直导航，在 2.x 版本中，nav 组件属于 element 模块的子集

使用：需要加载导航模块，也需要引入核心的js文件

导航依赖element模块

<script type="text/javascript">
    //导航依赖element模块
    layui.use('element',function(){
        var element = layui.element;
    });
</script>

API

API	描述
var element = layui.element	获得 `element` 模块。
element.render('nav', 'filter')	导航菜单 `nav` 组件渲染。

渲染

element.render('nav', filter);

参数 'nav' 是渲染导航的固定值
参数 filter : 对应导航容器 lay-filter 的属性值

nav 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。

<div id="test"></div>
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入导航元素
  $('#test').html(`
    <div class="layui-nav" lay-filter="demo-filter-nav">
      <li class="layui-nav-item layui-this"><a href="">选中</a></li>
      <li class="layui-nav-item"><a href="">菜单</a></li>
      <!-- … -->
    </div>
  `);
  // 渲染导航组件
  element.render('nav', 'demo-filter-nav');
});
</script>

属性

属性	描述
lay-shrink	导航容器属性。展开子菜单时，是否收缩兄弟节点已展开的子菜单。可选值： `lay-shrink=""` 不收缩兄弟菜单子菜单，默认; `lay-shrink="all"` 收缩全部兄弟菜单子菜单
lay-bar	导航容器属性。用于禁用滑块跟随功能。如： `<div class="layui-nav" lay-bar="disabled">…</div>`
lay-unselect	导航菜单项属性。设置后，点击对应菜单项时，不会出现选中效果。

事件

element.on('nav(filter)', callback)

参数 nav(filter) 是一个特定结构。
- nav 为导航事件固定值；
- filter 为导航容器属性 lay-filter 对应的值。
参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

当点击导航父级菜单和二级菜单时触发。示例：

<div class="layui-nav" lay-filter="demo-filter-nav">
  <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  var layer = layui.layer;
  
  // 导航点击事件
  element.on('nav(demo-filter-nav)', function(elem){
    console.log(elem); // 得到当前点击的元素 jQuery 对象
    layer.msg(elem.text());
  });
});
</script>