layui框架学习(45: 工具集模块)

2023-09-17 22:26:58

  layui的工具集模块util支持固定条、倒计时等组件,同时提供辅助函数处理时间数据、字符转义、批量事件处理等操作。
  util模块中的fixbar函数支持设置固定条(2.7版本的帮助文档中叫固定块),是指固定在页面一侧的工具条元素,不随页面滚动条滚动,默认在页面右下角位置。fixbar函数的原型为util.fixbar(options),options中的主要基础参数如下所示:
  1)bars。设置固定条中的按钮(或者叫菜单,英文是bar,layui中文教程中没有看到合适的翻译,暂且叫按钮)数组,每个按钮包括type(标识)、icon(图标)、content(显示内容)和style(按钮样式),固定条组件触发按钮事件时会将按钮的type传入事件处理函数。bars属性是2.8版本新增的属性,在2.7版本中,主要包括bar1、bar2和top三个按钮,2.8中为了兼容历史版本代码,如果检测到有bar1、bar2属性,则会将之处理后放入bars属性中,以便后续统一处理,详细的可以见参考文献4中util.js文件的代码。使用示例及效果如下所示。top按钮的效果是回到页面开头位置,算是固定条组件内置的功能按钮,只要按钮type为top即可,一般中页面开头位置隐藏后才出现top按钮。

	util.fixbar({
	    bars: [
			{
				type:'test1',
				icon:'layui-icon-heart'						
			},
			{
				type:'test2',
				icon:'layui-icon-key'		
			},
			{
				type:'top',
				icon:'layui-icon-top'
			}
		]
		,default:false
		,bgcolor:'#00aaff'
	  });

在这里插入图片描述

  2)bgcolor,设置固定条组件的背景色;
  3)css,设置固定条组件外层容器的任意 css 属性,可以用来调整固定条的位置;
  4)on ,设置固定条组件中按钮的事件处理函数,2.7版本中仅支持设置click事件的处理函数,2.8版本中则可以设置多种类型的事件处理函数;
  5)default ,是否显示默认的固定条,默认值为true,此时会将bar1、bar2、top按钮根据设置情况加入到bars属性中,代码如下所示。
在这里插入图片描述
  util模块中的countdown函数支持设置倒计时,其函数原型为util.countdown(options),在2.8版本中,options参数中主要包括date(倒计时截止时间值)、now(当前时间值)、ready(倒计时初始时的事件响应函数)、clock(倒计时过程中的事件处理函数,每秒触发一次)、done(倒计时完成时的事件响应函数),而在2.7版本中则仅有endTime(对应2.8中的date)、serverTime(对应2.8中的now)、callback(对应2.8中的clock)等三个基础参数。倒计时组件的使用示例请见参考文献3,在此不在演示。
  除了上述组件,util模块还以供以下函数以辅助编程或操作:
  1)timeAgo,返回指定时间在当前时间的多久前,该函数并不总是返回精确值,还有可能返回概况说法,如下所示;

在这里插入图片描述

  2)toDateString,格式化输出时间字符串,详细的参数说明见参考文献6;
  3)digit,函数原型为util.digit(num, length),即将数字num转换为字符串,如果字符串长度小于 length,则在左侧补零至长度为length;

  4)escape/unescape,转义/还原html字符串,将html字符串中的特殊字符转义/还原,作用类似于C#中的tobase64string和frombase64string;
  5)openWin,打开浏览器新标签页,最终要的基础参数为url,即设置要打开的网址,其它参数见参考文献6;
  6)on,设置批量处理事件,其函数原型为util.on(attr, obj, eventType),意思是处理所有属性名为attr的页面元素的eventType事件(默认为click事件),在obj中针对attr的具体值设置事件处理函数,具体的介绍见参考文献2、3、6。
  目前为止,layui2.7版本中的主要教程内容已经过了一遍,但是由于2.8版本新增或者优化了不少内容,后续可能还会花时间梳理2.8中的变更内容,同时在网上或者GitHub中找具体的项目或程序代码学习layui的用法。

参考文献:
[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://layui.dev/docs/2.8/
[6]https://layui.dev/docs/2.8/util/#toDateString

更多推荐

Spring设计模式,事务管理和代理模式的应用

扩充:贝叶斯定理答案见底。设计模式对关于面向对象问题的具体解决方案.1,单例多例在设计单例模式时,要注意两个点1.构造方法要私有2.成员变量要私有3.创建对象所用的方法要被synchronized修饰.(因为方法体中会涉及到判断当前成员对象是否为空,在饿汉模式下,会有多个线程来访问该方法,为了防止判断访问结果同时为空,

Python 和 Selenium 的浏览器爬虫

Selenium是一款强大的基于浏览器的开源自动化测试工具,最初由JasonHuggins于2004年在ThoughtWorks发起,它提供了一套简单易用的API,模拟浏览器的各种操作,方便各种Web应用的自动化测试。它的取名很有意思,因为当时最流行的一款自动化测试工具叫做QTP,是由Mercury公司开发的商业应用。

Webpack的Tree Shaking是如何工作的以及它的作用

聚沙成塔·每天进步一点点⭐专栏简介⭐什么是TreeShaking?⭐如何工作⭐它的作用⭐示例⭐写在最后⭐专栏简介前端入门之旅:探索Web开发的奇妙世界欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将

kubernetes进阶 (三) 基础练习

前两天朋友给了我几道题,看着挺简单的,但实际做的时候发现坑不少,这里做下笔记一、镜像构建部署lnmp1、构建镜像nginx、php、mysql要求使用centos7作为基础镜像2、使用deployment部署上面的容器,要求3个服务要放到一个pod中(虽然这样是不对的)3、使用ingress将上面部署的服务发布出去,通

(NDK编译)详解使用Android.mk编译的C/C++程序过程

想要在Android设备上运行C/C++程序可执行文件,可采用一个方法就是使用NDK编译,很多时候要比gcc编译更适合,这里我采用的是imx6q开发板上面装载了自己编写的Android6.0.1镜像,在Ubuntu64位系统上采用NDK编译。目录1.准备文件2.编写Android.mk注意完整Android.mk代码3

【Linux】生产消费模型 + 线程池

文章目录📖前言1.生产消费模型2.阻塞队列2.1成员变量:2.2入队(push)和出队(pop):2.3封装与测试运行:2.3-1对代码进一步封装2.3-2分配运算任务2.3-3测试与运行3.循环阻塞队列3.1POSIX信号量:3.1-1sem_init/sem_destroy3.1-2sem_wait3.1-3se

QT中的线程池的介绍和使用

文章目录前言一、线程池概念讲解二、使用线程池的场景三、QThreadPool类四、QT中使用线程池总结前言本篇文章将为大家讲解一下QT中线程池的概念和使用的方法。一、线程池概念讲解线程池是一种常见的并发编程模型,用于管理和复用多个线程来执行任务。它的基本思想是在应用程序启动时创建一组线程,这些线程可以重复使用,以执行一

HTML5 游戏开发实战 | 贪吃蛇

在该游戏中,玩家操纵一条贪吃的蛇在长方形场地里行走,贪吃蛇按玩家所按的方向键折行,蛇头吃到食物(豆)后,分数加10分,蛇身会变长,如果贪吃蛇碰上墙壁或者自身的话,游戏就结束了(当然也可能是减去一条生命)。贪吃蛇游戏的运行界面如上图所示。01、贪吃蛇游戏设计的思路把游戏画面看成40×30的方格。食物(豆)和组成蛇的块均在

HTML5 实现扑克翻牌游戏

扑克翻牌游戏就是桌面24张牌,玩家翻到两张相同扑克牌则消去,如果时间2分钟到了,仍然没有成功则游戏失败。扑克翻牌游戏运行结果如图1。01、程序设计的思路1.Html5倒计时功能Html5倒计时功能可以使用setTimeout()函数或者setInterval()函数来实现。1.使用setTimeout实现倒计时功能se

动态规划-货币问题

动态规划-货币问题题目一arr是货币数组,其中的值都是正数。再给定一个正数aim。每个值都认为是一张货币,即便是值相同的货币也认为每一张都是不同的,返回组成aim的方法数。例如:arr={1,1,1},aim=2,第0个和第1个能组成2,第1个和第2个能组成2,第0个和第2个能组成2,一共3种方法,所以返回3从递归入手

第三届阿里云磐久智维算法大赛——GRU BaseLine

赛题比赛链接:第三届阿里云磐久智维算法大赛-天池大赛-阿里云天池(aliyun.com)大赛概况庸医只知头痛医头脚痛医脚,凡良医者,必会抽丝剥茧,察其根本,方得药到病除。第一届和第二届磐久智维算法大赛,我们针对异常预测开展了积极的探索和卓有成效的实践。本届大赛我们延续对异常/故障这一领域的深入挖掘,以根因诊断为赛题,和

热文推荐