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

news2024/10/5 13:48:10

  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

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

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

相关文章

swift 事件

多个元素链接到单个IBAction 并区分

图书信息管理系统

#include<stdio.h> #include<string.h> #include<stdlib.h> #define MAXSIZE 10000typedef struct {char no[100];//图书ISBNchar name[100];//图书名字double price;//图书价格 } Book;typedef struct {Book data[MAXSIZE];int length; } SqList,*PSqList;P…

算法基础:图

图论 图论〔Graph Theory〕是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形&#xff0c;这种图形通常用来描述某些事物之间的某种特定关系&#xff0c;用点代表事物&#xff0c;用连接两点的线表示相应两个事物间具有这种关系。 …

Java实现Ip地址获取

Java实现Ip地址获取 一、两种实现方式二、测试结果 一、两种实现方式 package com.lyp;import org.apache.commons.lang3.ObjectUtils;import java.net.*; import java.util.ArrayList; import java.util.Enumeration; import java.util.List; import java.util.Optional;/***…

创建及编辑线要素

17. 创建及编辑线要素 17.1 功能讲解 所有QGIS按键&#xff0c;右下角带 * 的&#xff0c;都是新建的意思。下图中&#xff0c; File encoding尽量选择 System。可自定义字段&#xff0c;例如 ‘Btype’&#xff0c;可以用其以不同的标记区分省界和区界。 保存路径&#x…

「UG/NX」Block UI 指定矢量SpecifyVector

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

ES6中WeakMap和WeakSet

这里重点说一下它们和对应的set、map的区别 WeakSet 不能遍历,没有forEach&#xff0c;没有size只能添加对象垃圾回收器完全不考虑WeakSet对该对象的引用。 WeakMap 键只能是对象它的键存储的地址不会影响垃圾回收。 let obj {name: Tom,age: 20}let map new WeakMap();…

Linux安装Mysql(详细)

安装Mysql数据库 参考阿里云命令安装Mysql smartservice.console.aliyun.com/service/ser… 安装MySQL 1.远程连接ECS实例。 具体操作&#xff0c;请参见使用VNC登录实例。 2.运行以下命令&#xff0c;更新YUM源。 sudo rpm -Uvh https://dev.mysql.com/get/mysql80-com…

C++之this指针总结(二百二十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

SpringBoot启动输出了Mybatis-plus和Pagehelper的图标的解决方法

SpringBoot启动输出了Mybatis-plus和Pagehelper的图标 解决方法 Mybatis-plus mybatis-plus可以通过下面的配置关闭图标输出 mybatis-plus:global-config:banner: false #启动时不输出mp的图标pagehelper pagehelper要麻烦一些&#xff0c;需要在jvm的启动参数中进行配置…

使用docker安装部署kuboard并导入k8s集群

1 官网地址 https://kuboard.cn/install/v3/install.html#kuboard-v3-x-%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E2 找到推荐的安装方式 先点击左上角的安装 3 进入安装引导页面 复制出来里面的docker 命令&#xff0c;根据需求修改外面端口映射&#xff0c;KUBOARD_ENDPOINT…

Docker安装ElasticSearch/ES 7.10.0

目录 前言安装ElasticSearch/ES安装步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 安装步骤2&#xff1a;拉取ElasticSearch镜像1 拉取镜像2 查看已拉取的镜像 安装步骤3&#xff1a;创建容器创建容器方…

Chatgpt solve | 井底之蛙

这是一个经典的物理问题&#xff0c;我们可以使用Python来解决它。青蛙每分钟爬升4米&#xff0c;然后滑下2米&#xff0c;所以每分钟净爬升2米。 我们可以编写一个循环来模拟这个过程&#xff0c;直到青蛙爬出井口。下面是一个Python程序来解决这个问题&#xff1a; def time_…

算法通关村第二关——链表反转(黄金)

算法通关村第二关——链表反转黄金挑战 K 个一组翻转链表方法一&#xff1a;自己写的方法二&#xff1a;头插法 K 个一组翻转链表 25. K 个一组翻转链表 方法一&#xff1a;自己写的 我自己写的方式有点长&#xff0c;属于一点点一路路解决那种&#xff0c;其实用到的是穿针…

安卓抓jdwskey

安装京东&#xff0c;VNET VNET下载地址 https://www.vnet-tech.com/zh/ 2给权限 打开 VNET --点击右下角 ▶ --保存 CA.pem 证书 --打开手机系统设置搜索 证书–点击安装刚刚保存的 CA.pem 如果开始出现数据表示已经有权限抓包了&#xff0c;下面给权限跳过&#xff0c;直接开…

第15篇ESP32 idf框架 wifi联网_WiFi AP模式_手机连接到esp32开发板

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 ​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播…

Haproxy集群调度器与部署

目录 一、Haproxy介绍&#xff1a; 1.Haproxy应用分析&#xff1a; 2.Haproxy的特性&#xff1a; 3.Haproxy常见的调度算法&#xff1a; 4.LVS、Nginx、HAproxy的区别&#xff1a; 4.1 Haproxy与lvs对比&#xff1a; 4.2 Haproxy与nginx对比&#xff1a; 5. Haproxy优点&#x…

设计模式之十:状态模式

状态模式通过改变对象内部的状态来帮助对象控制自己的行为。 这是一张状态图&#xff0c;其中每个圆圈都是一个状态。 最简单&#xff0c;第一反应的实现就是使用一个变量来控制状态值&#xff0c;并在方法内书写条件代码来处理不同情况。 package headfirst.designpatterns.…

微服务架构介绍

系统架构的演变 1、技术架构发展历史时间轴 ①单机垂直拆分&#xff1a;应用间进行了解耦&#xff0c;系统容错提高了&#xff0c;也解决了独立应用发布的问题&#xff0c;存在单机计算能力瓶颈。 ②集群化负载均衡可有效解决单机情况下并发量不足瓶颈。 ③服务改造架构 虽然系…

操作系统备考学习 day3 (2.1.1 - 2.1.6)

操作系统备考学习 day3 二、进程与线程2.1 进程与线程2.1.1 进程的概念和特征2.1.2 进程的状态与转换2.1.3 进程的组织2.1.4 进程控制2.1.5 进程间通信&#xff08;IPC&#xff09;2.1.6 线程和多线程模型 二、进程与线程 2.1 进程与线程 2.1.1 进程的概念和特征 进程&#…