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

这篇具有很好参考价值的文章主要介绍了layui框架学习(45: 工具集模块)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  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'
	  });

layui框架学习(45: 工具集模块),网页编程,layui,工具集模块,util

  2)bgcolor,设置固定条组件的背景色;
  3)css,设置固定条组件外层容器的任意 css 属性,可以用来调整固定条的位置;
  4)on ,设置固定条组件中按钮的事件处理函数,2.7版本中仅支持设置click事件的处理函数,2.8版本中则可以设置多种类型的事件处理函数;
  5)default ,是否显示默认的固定条,默认值为true,此时会将bar1、bar2、top按钮根据设置情况加入到bars属性中,代码如下所示。
layui框架学习(45: 工具集模块),网页编程,layui,工具集模块,util
  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,返回指定时间在当前时间的多久前,该函数并不总是返回精确值,还有可能返回概况说法,如下所示;

layui框架学习(45: 工具集模块),网页编程,layui,工具集模块,util

  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文章来源地址https://www.toymoban.com/news/detail-732288.html

到了这里,关于layui框架学习(45: 工具集模块)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PowerToys Windows 工具集

    项目 2023/04/19 18 个参与者 反馈 Microsoft PowerToys 是一组实用工具,可帮助高级用户调整和简化其 Windows 体验,从而提高工作效率。 安装 PowerToys x64 :支持 ARM64 :支持 当前可用的实用工具包括: Always on Top 通过 Always on Top,可使用快捷键方式 (⊞ Win+Ctrl+T) 将窗口固定在其他窗口

    2024年02月06日
    浏览(67)
  • 国内可用免费AI工具集

    1、Kimi Chat         由月之暗面科技有限公司(Moonshot AI)开发的人工智能助手。擅长中英文对话,能够提供安全、有帮助且准确的回答。它的能力包括阅读和理解用户上传的文件,访问互联网内容,以及结合搜索结果来回答问题。比如上传一份英文资料,可让它翻译为中

    2024年03月14日
    浏览(56)
  • 个人可能会用到的工具集

    Odin 完整的本地化系统工具 - I2 Localization 游戏互动叙事工具 - articy:draft 3 功能强大的对话系统 - Dialogue System 游戏音频解决方案 - Master Audio 2022 高品质寻路系统 - A* Pathfinding Project Pro 场景优化工具 - Mesh Baker 游戏输入控制器 - Rewired 优质触控控制插件 - Lean Touch+ 防破解!代码混

    2024年02月15日
    浏览(49)
  • 安卓逆向_0 --- 逆向、安全、工具集

    ​吾爱 工具集 官网:https://www.52pojie.cn/ 工具集:https://down.52pojie.cn  :https://www.52pojie.cn/thread-811805-1-1.html 看雪 工具集 官网:https://bbs.kanxue.com/ 工具集:https://tools.pediy.com 看雪 知识库 看雪 知识库:https://www.kanxue.com/chm.htm?id=14693 安卓 逆向环境 r0env 安装设置 r0env :https://m

    2024年02月09日
    浏览(60)
  • VS工具集及C++规范

    一、VS工具集列表: Visual Studio 2008:v90 Visual Studio 2010:v100 Visual Studio 2012:v110 Visual Studio 2013:v120 Visual Studio 2015:v140 (v140_xp) Visual Studio 2017:v141 Visual Studio 2019:v142 Visual Studio 2022:v143 二、VS支持的C++规范: C++17:     vs2017基本支持,vs2015部分支持。 C++14:     vs2017就可以

    2024年02月07日
    浏览(50)
  • Visual Studio工具集相关(MSBuild)

    V100(VS2010)之前版本在MSBuild platsforms目录 V100(VS2010)之后的版本在VC中,经测试V140(VS2015)也在platforms中 -Visual Studio 2019: V142 -Visual Studio 2017: V141 -Visual Studio 2015: V140 -Visual Studio 2013: V120 -Visual Studio 2012: V110 -Visual Studio 2010: V100 -Visual Studio 2008: V90 -Visual Studio 2005: V80 -Visual Studio 2003: V71

    2024年02月08日
    浏览(59)
  • 【自然语言处理】3.1NLTK工具集

    NLTK为自然语言处理集 多语料库(Corpora) 词典资源(Lexicon),如WordNet 基本自然语言处理工具集 标记解析(Tokenization) 词干提取(Stemming) 词性标注(POS Tagging) 句法分析(Syntactic Parsing) 安装(command+R), pip install nltk 下载 nltk.download() 方法 停用词 因为语义不重要(如冠词)

    2024年02月11日
    浏览(54)
  • 数据仓库性能测试方法论与工具集

    目录 目录 数据仓库 v.s. 传统数据库 数据仓库性能测试案例 性能指标 测试方案 测试场景 测试数据集 测试用例 性能指标 测试脚本工具 基准环境准备 硬件环境 软件环境 测试操作步骤 Cloudwave 执行步骤 导入数据集 TestCase 1. 执行 13 条标准 SQL 测试语句 TestCase 2. 执行多表联合

    2024年02月12日
    浏览(41)
  • 云安全系列4:解析云安全工具集

    随着组织越来越多地将数据和应用转移到云端,云安全在确保工作负载安全方面变得至关重要。Gartener 就表示:“云优先战略现在已十分普遍,甚至在不愿承担风险的企业机构中也是如此。但由于缺乏确保安全云计算部署所必需的技能和工具,因此执行仍然受到阻碍。” 在了

    2024年02月02日
    浏览(42)
  • 猿创征文|2022个人开发工具集积累和分享

    目录   1、谷歌浏览器 2、华为浏览器 3、腾讯文档 3、Notepad-- 4、IntelliJ IDEA 5、VisualStudio 6、VSCode 7、微信开发者工具 8、Navicat 9、PDManer 10、Git/Tortoise Git 11、Axure 12、NxShell 13、ApiPost 14、Xmind 15、Everything 16、WizTree 17、猿如意 今天给大家分享一下作为一名资深程序员,日常常用的

    2024年02月05日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包