当前位置: 首页 > news >正文

layui框架学习(6:基础菜单)

  菜单是应用系统的必备元素,虽然网页中的导航也能作为菜单使用,但菜单和导航的样式和用途有所不同(不同之处详见参考文献5)。Layui中用不同的预设类定义菜单和导航的样式,同时二者依赖的模块也不一样。本文主要学习和记录Layui中基础菜单相关预设类的用法,其在下拉菜单、右键菜单等场景中的用法后续再学习。
  基础菜单包括常规菜单项、分隔符和带下级菜单的菜单项,Layui官方教程中采用ul元素作为基础菜单的顶级节点,但layui.css文件中并无限制。Layui采用预设类layui-menu标记基础菜单,同时配以唯一的id属性以便后续调用dropdown模块处理菜单事件。
  基础菜单下的菜单项均用li元素表示,一个li元素即为基础菜单的菜单项,其中没有预设类的为常规菜单项(没有下级菜单),可以直接在li元素中设置菜单名称,也可以在其下包含div子元素,并配以预设类layui-menu-body-title,用于定义菜单名称样式,文末会介绍lay-options的用途。常规菜单项预设类的用法及样式截图如下所示:

    <ul class="layui-menu" id="csdnmenu"><li lay-options="{id: 100}"><div class="layui-menu-body-title">撤销</div></li><li lay-options="{id: 101}"><div class="layui-menu-body-title">重做</div></li></ul>

在这里插入图片描述

  预设类为layui-menu-item-divider的菜单项为分隔符,用于分隔不同用途的菜单项,用法及样式截图如下所示:

    <ul class="layui-menu" id="csdnmenu"><li lay-options="{id: 100}"><div class="layui-menu-body-title">撤销</div></li><li lay-options="{id: 101}"><div class="layui-menu-body-title">重做</div></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 102}"><div class="layui-menu-body-title">剪切</div></li><li lay-options="{id: 103}"><div class="layui-menu-body-title">复制</div></li><li lay-options="{id: 104}"><div class="layui-menu-body-title">粘贴</div></li></ul>

在这里插入图片描述

  带下级菜单的菜单项分类两类,可收缩菜单支持上下折叠、展开子菜单,横向菜单支持横向显示子菜单,其中横向菜单的子菜单项Layui教程中建议放在面板内。
  预设类为layui-menu-item-group,且lay-options属性值包含type: 'group’的li菜单项为可收缩菜单,其内再嵌套一层基础菜单及菜单项即为下级菜单。增加预设类layui-menu-item-down可以设置子菜单为展开状态,而增加layui-menu-item-up则为折叠状态。用法及样式截图如下所示:

  <ul class="layui-menu" id="csdnmenu"><li lay-options="{id: 100}"><div class="layui-menu-body-title">撤销</div></li><li lay-options="{id: 101}"><div class="layui-menu-body-title">重做</div></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 102}"><div class="layui-menu-body-title">剪切</div></li><li lay-options="{id: 103}"><div class="layui-menu-body-title">复制</div></li><li lay-options="{id: 104}"><div class="layui-menu-body-title">粘贴</div></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"><div class="layui-menu-body-title">内容检查</div><ul><li lay-options="{id: 1051}">语法检查</li><li lay-options="{id: 1052}"><div class="layui-menu-body-title">错字检查</div></li><li lay-options="{id: 1053}">拼写检查</li></ul></li></ul>

在这里插入图片描述

  预设类为layui-menu-item-parent,且lay-options属性值包含type: 'parent’的li菜单项为横向菜单,其内嵌套一层面板,面板内再放置一层基础菜单及菜单项即为横向下级菜单。用法及样式截图如下所示。这里最好将菜单放在其他容器内(Layui示例代码中放在了栅格布局中),否则菜单项会占据页面整个宽度,看不到横向展开的子菜单。

<li class="layui-menu-item-parent" lay-options="{type: 'parent'}"><div class="layui-menu-body-title">书写方向<i class="layui-icon layui-icon-right"></i></div><div class="layui-panel layui-menu-body-panel"><ul><li lay-options="{id: 1061}"><div class="layui-menu-body-title">默认</div></li><li lay-options="{id: 1062}"><div class="layui-menu-body-title">从左向右</div></li><li lay-options="{id: 1063}"><div class="layui-menu-body-title">从右向左</div></li></ul></div></li>

在这里插入图片描述

  基础菜单依赖dropdown模块,该模块支持菜单项的点击选中、菜单组展开收缩等操作,同时支持处理菜单事件(示例代码如下所示,代码来自Layui官方教程,目前暂时没有看到具体的处理示例代码,后续再深入学习)。
  菜单项中的lay-options属性菜单项参数,可收缩菜单和横向菜单通过该参数中的type值区分,也可以自定义其它键值对放在该属性中。调用dropdown模块处理菜单点击事件时,会将该属性值传递给菜单事件处理函数。

layui.use('dropdown', function(){var dropdown = layui.dropdown;//菜单点击事件,其中 docDemoMenu1 对应的是菜单结构上的 id 指dropdown.on('click(docDemoMenu1)', function(options){var othis = $(this); //当前菜单列表的 DOM 对象console.log(options); //菜单列表的 lay-options 中的参数});
});

  除了上述内容之外,基础菜单中还有以下几点用法:
  1)菜单项中可以包含图标,无论是Layui内置图标或外部图标都可以使用;

 <li lay-options="{id: 107}"><i class="layui-icon">&#xe9aa;</i>刷新</li><li lay-options="{id: 108}"><i class="layui-icon">&#xe66d;</i>打印</li>

在这里插入图片描述

  2)如果是常规菜单,则li元素下可以直接包含菜单名称,也可以内嵌预设类为layui-menu-body-title、包含菜单名称的div元素,如果是可收缩菜单,则必须是后者的形式,否则鼠标点击菜单项时无法展开或折叠子菜单;
  3)预设类layui-menu-item-checked和layui-menu-item-checked2用于标识当前菜单项,这两个的区别是前者比后者多了一个绿色的竖条,如下图所示:
在这里插入图片描述
  4)预设类layui-menu-lg用于增加菜单项尺寸,看了一下layui.css,该预设类应该是放在基础菜单最顶层的ul元素的class中,增加该预设类后,菜单项高度增加了6px
  零零碎碎,暂时先记录这么多,后续学习过程中再随时补充内容。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://www.pmcaff.com/answer/1348084543479872

相关文章:

layui框架学习(6:基础菜单)

菜单是应用系统的必备元素&#xff0c;虽然网页中的导航也能作为菜单使用&#xff0c;但菜单和导航的样式和用途有所不同&#xff08;不同之处详见参考文献5&#xff09;。Layui中用不同的预设类定义菜单和导航的样式&#xff0c;同时二者依赖的模块也不一样。本文主要学习和记…...

第十三届蓝桥杯 C++ B组省赛 C 题——刷题统计(AC)

1.刷题统计 1.题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天 做 aaa 道题目, 周六和周日每天做 bbb 道题目。请你帮小明计算, 按照计划他将在 第几天实现做题数大于等于 nnn 题? 2.输入格式 输入一行包含三个整数 a,ba,ba,b 和 nnn. 3.输出…...

C++中的多态

【1】表现形式&#xff1a;同样的调用语句有多种不同的表现形态 【2】分类&#xff1a;静态联编和动态联编 静态联编有函数重载(运算符重载是特殊的函数重载),模板 【3】重点说下动态联编 【3.1】动态联编的实现需要以下步骤&#xff1a; 有继承关系、父类函数有virtual关…...

Swift如何保证线程安全

Swift可以通过以下几种方式来保证线程安全 使用互斥锁&#xff08;Mutex&#xff09;&#xff1a;使用互斥锁可以防止多个线程同时访问共享数据&#xff0c;保证线程安全。 使用OSAtomic操作&#xff1a;OSAtomic操作可以在多线程环境中安全地执行原子操作。 使用DispatchQue…...

整型提升+算术转换——“C”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是之前操作符那篇博客中没有讲完的内容&#xff0c;整型提升这个小知识点也非常重要&#xff0c;那现在&#xff0c;就让我们进入操作符的世界吧 隐式类型转换 算术转换 操作符的属性 隐式类型转换 表达式求值的顺序一部…...

Freemarker介绍

2. Freemarker介绍 FreeMarker 是一个用 Java 语言编写的模板引擎&#xff0c;它基于模板来生成文本输出。FreeMarker与 Web 容器无关&#xff0c;即在 Web 运行时&#xff0c;它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术&#xff0c;而且还可以用于生成 XML…...

【软件测试开发】Junit5单元测试框架

目录1. 注解Test 注解BeforeEach BeforeAllAfterEach AfterAll2. 断言 assertassertequalsassertTrue assertFalseassertNull assertNotNull3. 用例执行顺序方法排序&#xff0c;通过 Order 注解来排序4. 测试套件 Suite5. 参数化单参数stringsints6. 参数化多参数CsvSourceCsv…...

【C语言技能树】程序环境和预处理

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

数据库的三大范式

1.为什么需要数据库设计 设计数据表的时候&#xff0c;要考虑很多的问题: 用户需要哪些数据&#xff0c;我们在数据表中要保存哪一些数据怎么保证数据表中的数据的正确性如何降低数据表的冗余度开发人员怎么才能更方便的使用数据库 如果数据库设计得不合理的话&#xff0c;可…...

【MT7628】开发环境搭建-Fedora12安装之后无法上网问题解决

1.按照如下图所示,打开Network Connections 2.点击Network Connections,弹出如下界面...

[Android Studio]Android 数据存储-文件存储学习笔记-结合保存QQ账户与密码存储到指定文件中的演练

&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Android Debug&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Topic 发布安卓学习过程中遇到问题解决过程&#xff0c;希望我的解决方案可以对小伙伴们有帮助。 &#x1f4cb;笔记目…...

【openGauss实战9】深度分析分区表

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…...

XSS跨站脚本攻击剖析与防御:初识XSS

目录 跨站脚本介绍 1. 什么是XSS跨站脚本 2. XSS跨站脚本实例 3. XSS漏洞的危害 XSS的分类 1. 反射型XSS 2. 持久性XSS XSS构造 1. 利用< >标记注射Html /Javascript 2. 利用HTML标签属性值执行XSS 3. 空格回车Tab 4. 对标签属性值转码 5. 产生自己的事件…...

Python 高级编程之网络编程 Socket(六)

文章目录一、概述二、Python socket 模块1&#xff09;Socket 类型1、创建 TCP Socket2、创建 UDP Socket2&#xff09;Socket 函数1、服务端socket函数2、客户端socket函数3、公共socket函数三、单工&#xff0c;半双工以及全双工通信方式的区别四、单工&#xff0c;半双工以及…...

centos学习记录

遇到的问题及其解决办法 centos7安装图形化界面 yum groupinstall ‘X Window System’ yum groupinstall -y ‘GNOME Desktop’ 安装完成后输入init 5进入图形化界面 centos7安装vmware-tools 第一步卸载open-vm-tools 输入命令 yum remove open-vm-tools 输入命令 reboot 在…...

为什么说网络安全是风口行业?

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…...

12-PHP使用过的函数 111-120

111、rowCount if ($stmt->execute($data)) {//true//读:select//写:insert,update,delete,成功后会返回表中受影响的记录数量//!rowCount() 返回受影响的记录数量if ($stmt->rowCount() > 0) {echo 新增成功,id . $db->lastInsertId() . <hr>;} else {//…...

【JavaWeb项目】简单搭建一个前端的博客系统

博客系统项目 本项目主要分成四个页面: 博客列表页博客详情页登录页面博客编辑页 该系统公共的CSS样式 common.css /* 放置一些各个页面都会用到的公共样式 */* {margin: 0;padding: 0;box-sizing: 0; }/* 给整个页面加上背景 */ html, body{height: 100%; }body {backgrou…...

iPerf3 -M参数详解,场景分析

本文目录iPerf3 -M参数说明几个典型测试场景中应该如何设定合适的-M参数值理想局域网模型&#xff08;无丢包&#xff0c;无抖动&#xff09;高丢包&#xff0c;无抖动模型高丢包&#xff0c;高抖动模型&#xff08;网络质量比较差&#xff0c;IP转发路径变化频繁&#xff09;总…...

java的基本语法以及注意事项

Java 基础语法一个 Java 程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c;它…...

matlab搭建IAE,ISE,ITAE性能指标

目录前言准备IAEISEITAE前言 最近在使用matlab搭建控制系统性能评价指标模型&#xff0c;记录一下 准备 MATLAB R2020 IAE IAE函数表达式如下所示&#xff1a; IAE函数模型如下所示&#xff1a; ISE ISE函数表达式如下所示&#xff1a; ISE函数模型如下所示&#xff…...

docker安装mysql

在安装Mysql之前&#xff0c;我们可以先查看一下我们的镜像&#xff0c;输入命令&#xff1a; docker images 能发现&#xff0c;镜像里面只有一个Nginx&#xff0c;并没有Mysql 然后我们可以像上一篇安装Nginx一样&#xff0c;安装Mysql镜像。 输入以下命令&#xff0c;安装…...

Leetcode 回溯详解

回溯法 回溯法有“通用解题法”之称&#xff0c;用它可以系统地搜索问题的所有解。回溯法是一个既带有系统性又带有跳跃性的搜索算法。 在包含问题的所有解的解空间树中&#xff0c;按照深度优先搜索(DFS)&#xff09;的策略&#xff0c;从根结点出发深度探索解空间树。当探索…...

AI_Papers:第一期

2023.02.06—2023.02.12 文摘词云 Top Papers Subjects: cs.CL 1.Multimodal Chain-of-Thought Reasoning in Language Models 标题&#xff1a;语言模型中的多模式思维链推理 作者&#xff1a;Zhuosheng Zhang, Aston Zhang, Mu Li, Hai Zhao, George Karypis, Alex Sm…...

C/C++内存管理

C/C内存管理C/C内存分布C语言中内存管理的方式&#xff1a;malloc/calloc/realloc/freeC内存管理方式内置类型自定义类型operator new 与operator deletenew和delete的实现原理内置类型自定义类型定位new表达式(placement-new)new/delete与malloc/free的区别C/C内存分布 我们先…...

【大数据hive】hive 函数使用详解

一、前言 在任何一种编程语言中&#xff0c;函数可以说是必不可少的&#xff0c;像mysql、oracle中&#xff0c;提供了很多内置函数&#xff0c;或者通过自定义函数的方式进行定制化使用&#xff0c;而hive作为一门数据分析软件&#xff0c;随着版本的不断更新迭代&#xff0c…...

彻底搞懂分布式系统服务注册与发现原理

目录 引入服务注册与发现组件的原因 单体架构 应用与数据分离...

安卓Camera2用ImageReader获取NV21源码分析

以前如何得到Camera预览流回调 可以通过如下方法&#xff0c;得到一路预览回调流 Camera#setPreviewCallbackWithBuffer(Camera.PreviewCallback)&#xff0c;可以通过如下方法&#xff0c;设置回调数据的格式&#xff0c;比如 ImageFormat.NV21 Camera.Parameters#setPreview…...

24. 两两交换链表中的节点

文章目录题目描述迭代法递归法参考文献题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&a…...

linux006之帮助命令

linux帮助命令简介&#xff1a; linux的命令是非常多的&#xff0c;光靠人是记不住的&#xff0c;在工作中一般都会去网上查&#xff0c;这是有外网的情况下&#xff0c;如果项目中不允许访问外网&#xff0c;那么linux的帮助命令就可以派上用场了&#xff0c; linux帮助命令是…...

wordpress kswapd0/seo自学网免费

Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片&#xff0c;能够指定哪些区域可以被拉升&#xff0c;哪些区域不可以。 转载于:https://www.cnblogs.com/MrSaver/p/6885284.html...

做公司网站需要几个域名/百度访问量统计

目录第一章 AngularJS简介1.1、AngularJS简介1.2、AngularJS版本介绍1.3、AngularJS官方地址1.4、AngularJS代码体验第二章 AngularJS方法2.1、字符串大小写转换2.2、对象/数组深度拷贝2.3、对象/数组迭代函数2.4、常见数据类型判断2.5、序列化与反序列化第三章 AngularJS指令3…...

咔咔做受视频网站/全网热度指数

Python的安装登录官网&#xff1a;www.python.org&#xff0c;选择版本3.6.4进行下载(下文中皆以MacOS为例)并安装。 PyCharm的安装登录网址&#xff1a;www.jetbrains.com&#xff0c;选择专业版进行下载并安装。 激活PyCharm时&#xff0c;在License Server中填入&#xff1a…...

学习php网站开发/2022年十大流行语

UNIX Shell 里面比较字符写法-eq 等于; -ne 不等于;-gt 大于; -lt 小于 ;-le 小于等于; -ge 大于等于;-z 空串; -n 非空串; 两个字符相等; ! 两个字符不等无论什么编程语言都离不开条件判…...

网站做提示框/找网络公司做推广费用

由于安装的是纯净版系统&#xff0c;运行nano命令是提示没有找到该命令&#xff0c;以下是解决方法&#xff0c;用root权限的用户运行以下命令安装nano: yum install nano 遇到询问时一路点y即可。 安装好后运行&#xff1a;nano a.txt&#xff0c;如果该文件不存在就会创建一个…...

网站建设服务商 需要什么主机/重庆森林电影

什么是跨域&#xff1f; 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。 同源策略&#xff1a; 同源是指“协议域名端口”三者相同。 跨域解决方案&#xff1a; 1.通过jsonp跨域&#xff1b; 2.document.domainiframe跨域&#xff1b; 3.location.hashifram…...