Layui
文章平均质量分 52
前端框架的使用
第一段代码
第一行代码,从开始到精通
展开
-
layui组件添加动画并控制layui-anim动画的显示速度
layui给组件添加动画非常简单,只需要给对应的组件加上class即可:layui-anim layui-anim-scaleSpringlayui-anim必须要给,后面那个是具体动画的效果,layui提供了11种动画效果和1个循环动画的类.具体效果可看:Layui CSS3动画类if (d.待派单 > 0) { $("#dpd_tips").addClass("layui-anim layui-anim-scaleSpr原创 2021-05-12 17:17:13 · 2798 阅读 · 1 评论 -
LayUI:基于LayUI的图片放大预览方法
B/S端经常需要显示图片,图片有时候,需要预览放大,实现的方法,挺多的,比如鼠标点击放大,比如鼠标悬浮放大等,最近看到LayUI下,可以直接给img绑定onclick时间,可以在事件中打开一个弹窗显示图片,觉得还挺方便,记录以供后面使用. 该方式是通过点击事件后,在方法中实现,感觉后续也可以改成鼠标悬浮的响应事件吧.过程:(1)img标签 中需要增加绑定事件:onclick=\"previewImg(this)\"dr["照片"] = "<img onclick=\"previewI原创 2021-03-22 17:03:13 · 6202 阅读 · 1 评论 -
Layui自定义验证规则(Layui自定义固话验证,支持五位数的座机如12306)
0 前言在开发中,我们经常需要对一些输入数据通过正则表达式进行有效性验证,基于Layui框架开发下,Layui框架本身已经集成了一些基础的验证,这对我们在前端验证输入的有效性非常便捷,如我们需要验证邮箱的话,可以直接在该input域添加 lay-verify=” email”,这样该input域就会验证邮箱的有效性。目前Layui支持的验证规则有:required(必填项);phone(手机号);email(邮箱);url(网址);number(数字);date(日期);identity(身份证),同时原创 2020-06-30 15:00:31 · 1807 阅读 · 1 评论 -
基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)
基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)0 引言近期,跟随团队做项目,项目前端基于Layui框架开发,(插一句使用框架真的比自己写原生HTML+CSS舒服多了),项目中有一个时间控件的需求,一般项目常用的就是选取一个时间日期就完了,但是这个项目的时间控件需要考虑开始时间和结束时间的相互联动,即多个(本文是三个时间控件-日期控件、开始时间控件及结束时间控件相互限制,层级联动)。1 示例比如,当我选择了当前日期为当天后,开始时间控件的可选时间节点必须是原创 2020-06-30 00:26:51 · 3770 阅读 · 0 评论