Layui快速入门之第五节 导航

目录

一:基本概念

导航依赖element模块

API

渲染

属性

事件

二:水平导航

常规用法:

三:垂直导航

四:侧边垂直导航

五:导航主题

六:加入徽章等元素

七:面包屑导航

ps:面包屑导航渲染


一:基本概念

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

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

导航依赖element模块


API

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

渲染

element.render('nav', filter);

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

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

属性

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

事件

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

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

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


二:水平导航

一般用于页面头部菜单。样式规则如下:

  • 通过 class="layui-nav" 设置导航容器
  • 通过 class="layui-nav-item" 设置导航菜单项
    • 追加 className 为 layui-this 可设置菜单选中项
  • 通过 class="layui-nav-child" 设置导航子菜单项
    • 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐

常规用法:

备注:滑块效果仅跟随不存在子菜单的菜单项

三:垂直导航

一般用于左侧侧边菜单。样式规则如下:

  • 在水平导航的 class 规则上,通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。
  • 通过 class="layui-nav-itemed" 设置父菜单项为展开状态
  • 通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航
  • 其余结构及填充内容与水平导航完全相同

Layui快速入门之第五节 导航_第1张图片

四:侧边垂直导航




  
  侧边垂直导航 - Layui
  
  
  
  






Layui快速入门之第五节 导航_第2张图片

五:导航主题

给导航容器追加任意背景色 class


 



Layui快速入门之第五节 导航_第3张图片

六:加入徽章等元素

七:面包屑导航

面包屑导航主要用于指示当前页面所处的位置,并能返回到上级页面。

默认面包屑

首页 演示 导航元素

自定义分隔符

首页 国际新闻 亚太地区 正文

门户频道

娱乐 八卦 体育 搞笑 视频 游戏 综艺

Layui快速入门之第五节 导航_第4张图片

ps:面包屑导航渲染

element.render('breadcrumb', filter);

  • 参数 'breadcrumb' 是渲染面包屑导航的固定值
  • 参数 filter : 对应面包屑导航容器 lay-filter 的属性值

该方法主要用于对动态插入的面包屑导航的初始化渲染,用法同上述导航菜单

你可能感兴趣的:(Layui,layui,前端,javascript)