Layui快速入门之第五节 导航

news2024/12/24 3:34:10

目录

一：基本概念

导航依赖element模块

API

渲染

属性

事件

二：水平导航

常规用法：

三：垂直导航

四：侧边垂直导航

五：导航主题

六：加入徽章等元素

七：面包屑导航

ps：面包屑导航渲染

一：基本概念

     导航是指支持用户导航、进入和退出应用中不同内容片段的交互。导航菜单包含水平导航和垂直导航， 在 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>

二：水平导航

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

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

常规用法：

<ul class="layui-nav">
  <li class="layui-nav-item layui-this"><a href="nav.html">选中</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">常规</a>
  </li>
  <li class="layui-nav-item"><a href="nav.html">导航</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">子级</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">菜单1</a></dd>
      <dd><a href="nav.html">菜单2</a></dd>
      <dd><a href="nav.html">菜单3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">选项</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd class="layui-this"><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">演示</a></li>
</ul>

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

三：垂直导航

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

  • 在水平导航的 class 规则上，通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。
  • 通过 class="layui-nav-itemed" 设置父菜单项为展开状态
  • 通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航
  • 其余结构及填充内容与水平导航完全相同
<ul class="layui-nav layui-nav-tree">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">默认收缩</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
</ul>

四：侧边垂直导航

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>侧边垂直导航 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-nav-side">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">默认收缩</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
</ul>
<script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
<script>
layui.use(function(){
  var element = layui.element;
  element.render('nav');
});
</script>
</body>
</html>

五：导航主题

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

<ul class="layui-nav layui-bg-gray">
  <li class="layui-nav-item"><a href="nav.html">浅色导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
 
<br>
 
<ul class="layui-nav layui-bg-cyan">
  <li class="layui-nav-item"><a href="nav.html">藏青导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
<br>
 
<ul class="layui-nav layui-bg-green" lay-bar="disabled">
  <li class="layui-nav-item"><a href="nav.html">墨绿导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
<br>
 
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
  <li class="layui-nav-item"><a href="nav.html">蓝色导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>

六：加入徽章等元素

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="nav.html">带徽章<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="nav.html">小圆点<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" lay-unselect>
    <a href="javascript:;">
      <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
    </a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">子级菜单</a></dd>
      <dd><a href="javascript:;">横线隔断</a></dd>
      <hr>
      <dd style="text-align: center;"><a href="nav.html">退出</a></dd>
    </dl>
  </li>
</ul>

七：面包屑导航

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

<h3>默认面包屑</h3>
<span class="layui-breadcrumb">
  <a href="/index.html">首页</a>
  <a href="https://layui.dev/demo/">演示</a>
  <a><cite>导航元素</cite></a>
</span>
<h3>自定义分隔符</h3>
<span class="layui-breadcrumb" lay-separator=">">
  <a href="nav.html">首页</a>
  <a href="nav.html">国际新闻</a>
  <a href="nav.html">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<h3>门户频道</h3>
<span class="layui-breadcrumb" lay-separator="|">
  <a href="nav.html">娱乐</a>
  <a href="nav.html">八卦</a>
  <a href="nav.html">体育</a>
  <a href="nav.html">搞笑</a>
  <a href="nav.html">视频</a>
  <a href="nav.html">游戏</a>
  <a href="nav.html">综艺</a>
</span>

ps：面包屑导航渲染

element.render('breadcrumb', filter);

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1006564.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大学经典题目：Java输出杨辉三角形

大学经典题目：Java输出杨辉三角形

本节利用​ 过 Java 语 ​言中的流程控制语句&#xff0c;如条件语句、循环语句和跳转语句等知识输出一个指定行数的杨辉三角形。 杨辉三角形由数字进行排列&#xff0c;可以把它看作是一个数字表&#xff0c;其基本特性是两侧数值均为 1&#xff0c;其他位置的数值是其左上方数…
阅读更多...
Kettle——大数据ETL工具

Kettle——大数据ETL工具

文章目录 ETL一、Kettle二、安装和运行Kettle三、Kettle使用四、Kettle核心概念可视化转换步骤跳 ETL ETL(Extract-Transform-Load&#xff0c;即数据抽取、转换、转载)&#xff0c;对于企业或行业应用来说&#xff0c;我们经常会遇到各种数据的处理&#xff0c;转换&#xff…
阅读更多...
【操作系统】进程的概念、组成、特征

【操作系统】进程的概念、组成、特征

概念组成 程序&#xff1a;静态的放在磁盘&#xff08;外存&#xff09;里的可执行文件&#xff08;代码&#xff09; 作业&#xff1a;代码&#xff0b;数据&#xff0b;申请&#xff08;JCB&#xff09;&#xff08;外存&#xff09; 进程&#xff1a;程序的一次执行过程。 …
阅读更多...
5. 自动求导

5. 自动求导

5.1 向量链式法则 ① 例子1是一个线性回归的例子&#xff0c;如下图所示。 5.2 自动求导 5.3 计算图 5.4 两种模型 ① b是之前计算的结果&#xff0c;是一个已知的值。 5.5 复杂度 5.6 自动求导 import torch x torch.arange(4.0) x 结果&#xff1a; ② 在外面计算y关于x的…
阅读更多...
linux 用户、组操作

linux 用户、组操作

一、创建用户并设置密码 #创建用户 duoergun useradd duoergun #设置用户 duoergun 密码 passwd duoergun二、创建组 #创建组 qingdynasty groupadd qingdynasty三、用户添加到组&#xff0c;用户从组删除 #添加用户duoergun到组qingdynasty usermod -aG qingdynasty duoer…
阅读更多...
【CSS】React项目如何在CSS样式文件中使用变量

【CSS】React项目如何在CSS样式文件中使用变量

需求 在修改样式时候&#xff0c;需要根据不同条件&#xff0c;使用不同的样式&#xff0c;使用动态类需要多重判断&#xff0c;是否考虑使用变量传入的方式呢 应该怎么做 tsx import ./App.css; import ./test.cssfunction App() {const styles {--var: white,};return (…
阅读更多...
20230912java面经整理

20230912java面经整理

1.gc算法有哪些 引用计数&#xff08;循环引用&#xff09;和可达性分析找到无用的对象 标记-清除&#xff1a;简单&#xff0c;内存碎片&#xff0c;大对象找不到空间 标记-复制&#xff1a;分成两半&#xff0c;清理一半&#xff0c;没有碎片&#xff0c;如果存活多效率低&a…
阅读更多...
Bigemap 在土地图利用环境生态行业中的应用

Bigemap 在土地图利用环境生态行业中的应用

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP Bigemap 在土地图利用环境生态行业中的应用  使用场景 &#xff1a; 1. 土地利用占地管理&#xff1a; 核对数据&#xff0c;查看企业的实际占地是否超出宗地&…
阅读更多...
电商运营管理——广告系统

电商运营管理——广告系统

广告位对于电商平台而言&#xff0c;具有非常重要的作用。如何设计一个广告位是本篇文章重点讲述的内容&#xff0c;作者从六个方面出发&#xff0c;系统地介绍该如何去搭建一个广告位&#xff0c;能为产品设计的同学提供一些思路。 对于电商平台&#xff0c;广告位无论是对产品…
阅读更多...
制造业企业使用哪种ERP系统好？金蝶还是用友？

制造业企业使用哪种ERP系统好？金蝶还是用友？

制造业企业使用哪种ERP系统好&#xff1f;金蝶还是用友&#xff1f; 综合来看&#xff0c;这几位都算是是典型的ERP软件&#xff0c;它有着ERP软件应该有的基础功能&#xff0c;并且做的也比较成熟。下面是本文对这几个软件的总结 金蝶&#xff1a; 优势&#xff1a;1.产品丰…
阅读更多...
mysql逻辑备份和恢复

mysql逻辑备份和恢复

备份恢复指令 1 全备 &#xff08;变量为密码、端口号、输出路径。 --compress支持压缩&#xff09; mysqldump -uroot -p*** -P*** --single-transaction --master-data2 --flush-logs --hex-blob --flush-privileges --triggers --routines --events --all-databases > …
阅读更多...
【100天精通Python】Day61：Python 数据分析_Pandas可视化功能：绘制饼图，箱线图，散点图，散点图矩阵，热力图，面积图等（示例+代码）

【100天精通Python】Day61：Python 数据分析_Pandas可视化功能：绘制饼图，箱线图，散点图，散点图矩阵，热力图，面积图等（示例+代码）

目录 1 Pandas 可视化功能 2 Pandas绘图实例 2.1 绘制线图 2.2 绘制柱状图 2.3 绘制随机散点图 2.4 绘制饼图 2.5 绘制箱线图A 2.6 绘制箱线图B 2.7 绘制散点图矩阵 2.8 绘制面积图 2.9 绘制热力图 2.10 绘制核密度估计图 1 Pandas 可视化功能 pandas是一个强大的数…
阅读更多...
在 Python 中实现 DBSCAN

在 Python 中实现 DBSCAN

一、说明 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;聚类是一种基于密度的聚类算法。它能够根据数据点的密度来将数据划分为不同的类别&#xff0c;并可以自动识别离群点。DBSCAN聚类算法的核心思想是将密度高的数据点划分为…
阅读更多...
MacVim for Mac：强大的文本编辑器，提升你的编程体验

MacVim for Mac：强大的文本编辑器，提升你的编程体验

在Mac上&#xff0c;有这样一款独特的文本编辑器——MacVim for Mac&#xff0c;它以其强大的功能和出色的性能&#xff0c;吸引了广大的程序员和编程爱好者。这款编辑器不仅继承了Unix编辑器Vi的强大功能&#xff0c;更通过创新的设计和功能拓展&#xff0c;提供了一款更完整、…
阅读更多...
批量上传文件，以input上传文件，后端以List＜MultipartFile＞类型接收

批量上传文件，以input上传文件，后端以List＜MultipartFile＞类型接收

批量上传文件&#xff0c;以input上传文件&#xff0c;后端以List类型接收 一、后端接口二、前端对接三、测试 最近公司要求要做一个批量上传文件的功能&#xff0c;以往做的导入Excel表格、上传图片都是上传一个文件的&#xff0c;此次在开发的过程中着实让我犯了难&#xff0…
阅读更多...
vue Echarts饼图指定颜色与数据对应

vue Echarts饼图指定颜色与数据对应

需求&#xff1a;一般自定义颜色是按照数据的顺序依次对应&#xff0c;现在想要指定字段对应某个颜色 因为是直接在返回数据中做操作&#xff0c;所以直接写这部分的代码 数据格式 cdata: {xData: ["水文", "森林", "气象", "地质",…
阅读更多...
学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程（冲哥）|第十五集：中断系统和外部中断

学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程（冲哥）|第十五集：中断系统和外部中断

文章目录 1.中断和中断系统1.1什么是中断?1.2什么是中断系统1.3中断系统的优点1.4 中断系统包含哪些中断源1.5.中断次序 2.什么是外部中断3.外部中断的用法4.外部中断的用法完整代码 总结课后练习: 上节课我们学完了GPIO的矩阵按键&#xff0c;已经把这个GPIO的一个外设全都已…
阅读更多...
最小二乘法的实现与线性回归的应用

最小二乘法的实现与线性回归的应用

1. 简介 简单线性回归中&#xff0c;您有一个因变量y和一个自变量X。该模型可以表示为&#xff1a; y m x b ymxb ymxb 其中 x x x: 自变量 y y y: 因变量 m m m: 斜率 b b b: 截距 最小二乘法是回归分析中用于估计线性回归模型参数的标准方法。它可以最小化误差的平方和&…
阅读更多...
SpringBoot课堂笔记20230913

SpringBoot课堂笔记20230913

本篇文章为SpringBoot学习笔记&#xff0c;方便自己再复习。 Maven&#xff1a;jar包管理工具 注解&#xff1a; Controller:处理http请求&#xff0c;返回的视图 RestController: 相当于ResponseBody和Controller一起用&#xff0c;返回的是json ResponseBody:返回响应内容 …
阅读更多...
客户关系管理的定义及三种常见的CRM系统

客户关系管理的定义及三种常见的CRM系统

CRM旨在加强企业与客户的关系&#xff0c;建立以客户为中心的经营策略。随着技术的迅速发展&#xff0c;CRM的实施变得更加普遍&#xff0c;不仅能帮助企业与客户建立紧密联系&#xff0c;还能实现客户细分开展个性化的营销活动。客户关系管理是什么&#xff0c;CRM怎么分&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023