- 最新版本
- 2.5.6,2020-01-15 [4]
- 类 型
- 开源的模块化前端 UI 框架 [1]
- 面向人群
- 后端开发者,前端工程师
- 优 点
- 原生开发模式、模块化、兼容性强 [3]
- 外文名
- layui [1]
- 作 者
- 贤心 [2]
-
layui-laydate时间日历控件详细示例
2018-05-23 17:18:53此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>la...layui下载地址:http://www.layui.com/
此控件可使用layui或者独立版的layDate,两者初始化有些不同
在 layui 模块中使用layui.code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>layDate快速使用</title>
- <link rel="stylesheet" href="/static/build/layui.css" media="all">
- </head>
- <body>
- <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
- <input type="text" class="layui-input" id="test1">
- </div>
- <script src="/static/build/layui.js"></script>
- <script>
- layui.use('laydate', function(){
- var laydate = layui.laydate;
- //执行一个laydate实例
- laydate.render({
- elem: '#test1' //指定元素
- });
- });
- </script>
- </body>
- </html>
作为独立组件使用layui.code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>使用 layDate 独立版</title>
- </head>
- <body>
- <input type="text" id="test1">
- <script src="laydate.js"></script>
- <script>
- //执行一个laydate实例
- laydate.render({
- elem: '#test1' //指定元素
- });
- </script>
- </body>
- </html>
详细配置和事件触发,注释写的很清楚了
laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等(类型:String/DOM,默认值:无必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象) ,type: 'year'//year-只提供年列表选择||month-只提供年、月选择||date-可选择:年、月、日。type默认值,一般可不填||time-只提供时、分、秒选择||datetime-可选择:年、月、日、时、分、秒 ,range: true //或 range: '~' 来自定义分割字符 ,format: 'yyyy年MM月dd日' //可任意组合 yyyy年MM月dd日 HH时mm分ss秒===2017年08月18日 20时08分08秒,'yyyy/mm/dd' ,value: '2018-08-18' //必须遵循format参数设定的格式String,默认值:new Date() ,min: '2017-1-1'//min/max - 最小/大范围内的日期时间值 类型:string,默认值:min: '1900-1-1'、max: '2099-12-31' ,max: '2017-12-31' ,trigger: 'click' // 自定义弹出控件的事件(类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click)-采用click弹出 ,show: true //默认显示-类型:Boolean,默认值:false;;;;如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件 ,position: 'static'//类型:String,默认值:absolute (fixed,absolute,static) ,zIndex: 99999999//层叠顺序-类型:Number,默认值:66666666一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效 ,showBottom: false//是否显示底部栏--类型:Boolean,默认值:true如果设置 false,将不会显示控件的底部栏区域 ,btns: ['clear', 'now', 'confirm']//类型:Array,默认值:['clear', 'now', 'confirm'](显示清空,今天,确认) ,lang: 'en'//语言类型:String,默认值:cn--内置了两种语言版本:cn(中文版)、en(国际版,即英文版) ,theme: 'grid'//主题-类型:String,默认值:default,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题) ,calendar: true//是否显示公历节日--类型:Boolean,默认值:false ,mark: {//标注重要日子--类型:Object,默认值:无 '0-10-14': '生日' ,'0-12-31': '跨年' //每年12月31日 ,'0-0-10': '工资' //每个月10号 ,'2017-8-15': '' //具体日期 ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章 ,'2017-8-21': '发布' } ,ready: function(date){//控件在打开时触发,回调返回一个参数 console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} } ,change: function(value, date, endDate){//日期时间被切换后的回调 console.log(value); //得到日期生成的值,如:2017-08-18 console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。 } ,done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。 console.log(value); //得到日期生成的值,如:2017-08-18 console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。 } });
---------------------------------------------分割线---------------------------------------------------------
ps:评论有人问range问题,是这样用的:
layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#test1', //指定元素 range:'~', value: '2019-04-16 ~ 2019-04-19' }); });
设置默认值时value 的值不是用数组,是要用跟input中展示的格式一样,这样点击input会自动显示默认区间范围
range也可以写成 range:true ,这样分隔符默认为 ‘-’ ,也就是2019-04-16 - 2019-04-19
-
layui 表单标签的校验
2017-10-19 09:42:04layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值同时支持多条规则的...前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程
layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。
required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值
同时支持多条规则的验证,格式:lay-verify=“验证A|验证B”
如:lay-verify=“required|phone|number”另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=“pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义
示例:
<div class="layui-form-item"> <label for="" class="layui-form-label">请输入邮件</label> <div class="layui-input-block"> <input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input"> </div> </div>
填入非法邮件时,点击提交会有笑脸图标提示,挺棒的!
自定义校验:
form.verify({ username: function(value, item){ //value:表单的值、item:表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ return '用户名不能有特殊字符'; } if(/(^\_)|(\__)|(\_+$)/.test(value)){ return '用户名首尾不能出现下划线\'_\''; } if(/^\d+\d+\d$/.test(value)){ return '用户名不能全为数字'; } } //我们既支持上述函数式的方式,也支持下述数组的形式 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字] ,pass: [ /^[\S]{6,12}$/ ,'密码必须6到12位,且不能出现空格' ] });
当你自定义了类似上面的验证规则后,你只需要把key赋值给输入框的 lay-verify 属性即可:
<input type="text" lay-verify="username" placeholder="请输入用户名"> <input type="password" lay-verify="pass" placeholder="请输入密码">
###专业墙纸贴纸厨房用具装饰出售,本人网店经营
博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦_。https://item.taobao.com/item.htm?id=569617707364 -
layUI展示树状treetable树形表格完整代码
2018-10-23 10:01:33前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html 树状表格...前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html
–modify from 2020-11-06 09:01
**示例下载:**https://download.csdn.net/download/qq_35393472/13090180
–modify from end树状表格步骤如下:
1、首先下载所需调用的文件。
下载链接:https://pan.baidu.com/s/1MRZT4VI4rUTzKL_ap5yipw2、引入刚刚下载的文件 (压缩包中有:module文件夹 和json文件夹)
module文件中是需要调用的js和css
json是后端所需要给前端传的数据格式(例子,不是下方代码的数据)。3、还需要正常的引用layUI的必要文件(例如:layui.js、layui.css等,根据项目所需!)
HTML:(下方的table标签 和 最后三个button 是重要代码,其他可忽略)
<div class="xm"> <div class="xm-d1"> <p class="xm-d1-p">权限管理</p> </div> <div class="xm-d2"> <div class="xm-d2-hang1"> <div class="pzright" style="width:101%;display: flex;justify-content: flex-start;float:right;"> <p class="xm-d1-p2"> <button id="add" onclick="addPermission()" class="layui-btn layui-btn-radius btnys"><i class="layui-icon"></i>添加</button> <button class="layui-btn" id="btn-expand">全部展开</button> <button class="layui-btn" id="btn-fold">全部折叠</button> <button class="layui-btn" id="btn-refresh">刷新表格</button> </p> </div> <div class="clear"></div> </div> <div class="xm-d2-hang2"> <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table> </div> </div> </div>
主要代码:(JavaScript)
/*使用模块加载的方式 加载文件*/ layui.config({ base: '${ctx}/resoueces/css/layui/module/' }).extend({ treetable: 'treetable-lay/treetable' }).use(['layer', 'table', 'treetable'], function () { var $ = layui.jquery; var table = layui.table; var layer = layui.layer; var treetable = layui.treetable; // 渲染表格 var renderTable = function () {//树桩表格参考文档:https://gitee.com/whvse/treetable-lay layer.load(2); treetable.render({ treeColIndex: 1,//树形图标显示在第几列 treeSpid: 0,//最上级的父级id treeIdName: 'permissionId',//id字段的名称 treePidName: 'pid',//pid字段的名称 treeDefaultClose: false,//是否默认折叠 treeLinkage: true,//父级展开时是否自动展开所有子级 elem: '#permissionTable', url: '${ctx}/permission/permissionTree', page: false, cols: [[ {type: 'numbers', title: '编号'}, {field: 'permissionName', title: '资源名称'}, {field: 'permissionUrl', title: '资源路径'}, {field: 'permissionType', title: '资源简介'}, {field: 'pid', title: '排序'}, {field: 'resType', title: '类型', templet: function(d){ if(d.resType==0){ return '菜单'; }else{ return '按钮'; } } }, {templet: complain, title: '操作'} ]], done: function () { layer.closeAll('loading'); } }); }; renderTable(); //触发三个button按钮 $('#btn-expand').click(function () { treetable.expandAll('#permissionTable'); }); $('#btn-fold').click(function () { treetable.foldAll('#permissionTable'); }); $('#btn-refresh').click(function () { renderTable(); }); function complain(d){//操作中显示的内容 if(d.permissionUrl!=null){ return [ '<a class="operation" lay-event="edit" href="javascript:void(0)" onclick="editDepartment(\''+ d.permissionId + '\')" title="编辑">', '<i class="layui-icon layui-icon-edit"></i></a>', '<a class="operation" lay-event="" href="javascript:void(0)" onclick="delDepartment(\''+ d.permissionId + '\')" title="删除">', '<i class="layui-icon layui-icon-delete" ></i></a>', ].join(''); }else{ return ''; } } //监听工具条 table.on('tool(permissionTable)', function (obj) { var data = obj.data; var layEvent = obj.event; if(data.permissionName!=null){ if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); } } }); });
备注:另外对数据库的表要有一定的等级关系。要有pid列
效果图:
我的后端传给前端的json:(请做参考,数据库表列同内容)
{"msg":"true","code":0,"data":[{"permissionId":1,"permissionName":"系统管理","permissionUrl":null,"permissionType":null,"icon":null,"pid":0,"seq":0,"resType":"0"},{"permissionId":2,"permissionName":"账户管理","permissionUrl":"/link/sysUsers","permissionType":"管理登录的账户","icon":null,"pid":1,"seq":1,"resType":"1"},{"permissionId":3,"permissionName":"部门管理","permissionUrl":"/link/deparAdministrate","permissionType":"部门的管理","icon":null,"pid":1,"seq":2,"resType":"1"},{"permissionId":4,"permissionName":"角色管理","permissionUrl":"/link/sysRoleManage","permissionType":"设定角色的权限","icon":null,"pid":1,"seq":3,"resType":"1"},{"permissionId":5,"permissionName":"权限管理","permissionUrl":"/link/sysPermission","permissionType":"对权限进行编辑","icon":null,"pid":1,"seq":4,"resType":"1"},{"permissionId":6,"permissionName":"系统日志","permissionUrl":"/link/sysLog","permissionType":"系统日志","icon":null,"pid":1,"seq":5,"resType":"1"}],"count":6}
如果上方对您有帮助 还请您可以随意施舍一点,有问题也可加V(1173681997):
-
layui在线引用地址
2018-08-29 16:17:572.4.3版本layui在线引用地址(永久有效) layui.js:https://heerey525.github.io/layui-v2.4.3/layui/layui.js layui.css:https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css 2.4.4版本layui在线...之前有提供过自己GitHub的layui地址,由于后面修改过用户名以及自定义域名导致失效,另外原域名layui.hcwl520.com.cn已于2019年7月31正式下线,且全站301到 www.layuicdn.com
2.5.5版本layui在线引用地址
layui.js:https://www.layuicdn.com/layui-v2.5.5/layui.js
layui.css:https://www.layuicdn.com/layui-v2.5.5/css/layui.css
2.5.6版本layui在线引用地址
layui.js: https://www.layuicdn.com/layui-v2.5.6/layui.js
layui.css: https://www.layuicdn.com/layui-v2.5.6/css/layui.css
最新版本layui在线引用地址
layui.js: https://www.layuicdn.com/layui/layui.js
layui.css: https://www.layuicdn.com/layui/css/layui.css
对于layui我用了比较短的时候后面没有用,导致后面对于这篇文章中的在线引用地址没有及时更正,后发现有朋友反馈,遂改之。
CHC云提供的layui CDN库:https://www.layuicdn.com/
(包括layui、layer、laydata、FlyTemplate)
-
Layui文件下载
2019-09-10 09:27:20Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...div class="layui-body"> <!-- 内容主体区域 --> <... -
layui 如何取得select下拉框选中的值
2018-07-13 09:58:05引用layui插件,取得下拉框的值模板:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" ... -
使用layui 渲染table数据表格
2018-04-18 15:37:00先上最终效果图:1,引入layui的css和js文件<link rel="stylesheet" href="lib/layui/css/layui.css"><script src="lib/layui/layui.js"></... -
Layui 关闭layui的tab页
2020-08-16 10:44:22var admin = layui.admin; var topAdmin = parent === self ? admin : parent.layui.admin; // 关闭tab页 topAdmin.closeThisTabs(); $("#LAY_app_tabsheader>li").eq(admin.tabsPage.index).find('.layui-... -
layui 不进入 layui.extend
2020-06-04 14:39:58将 layui.extend写在layui.js引入之后,如: -
layui按钮
2020-02-28 10:42:24按钮类设置:class=“layui-btn” ;不设置其它任何二级类名就是普通按钮 1 主题类 :layui-btn-primary 原始主题。 原始 class=“layui-btn layui-btn-primary” 默认 class=“layui-btn” 百搭 class=“layui-btn ... -
layui弹出层表单
2019-07-03 09:11:55现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">... -
layui乱码
2020-06-10 23:18:140、描述:layui乱码 1、位置:表格顶部底部 2、尝试过的 转码 charset 3、我的问题及解决: 原本引入的文件是layui.all.js 改成layui.js 直接就好了。。。 -
Layui使用
2019-05-08 11:44:45一.1.layui模块化使用:如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入Query和layer.js,但需要引入layui.css和layui.js。 调用方式:通过layui.use(‘layer’,callback)加载和初始化layer模块。... -
使用 Vue + LayUI 做后台管理、RESTful 交互
2018-08-22 14:27:08一、前言 1、之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次...2、使用 vue + layui 了,但 layui 里边的 layui.js 模块 vue.js 冲突, 因此放弃使用 layui.js,导致很多高级... -
layui进度条
2019-10-02 13:15:24layui-progress 代表一个进度条 |-- layui-progress-bar 代表进度条里面的进度 layui-progress-big 变粗了 相关属性 lay-percent 代表进度值 lay-showpercent="true" 是否显示进度值 代码如下图: <%-... -
layui扩展一个layui 模块
2019-07-16 10:16:16layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', function(exports){var $ = layui.$ ,layer = layui.layer 。。(剩下内容和下面一样的,这样这个里面就能用layer的... -
使用layui是报错layui is not defined
2020-03-29 18:56:05错误放上 ...原因:这是由于你导入自己写的js文件才导入layui.js文件,因为程序从上到下执行,先执行你写的js文件中这段话,这时候没有加载layui.js,所以不认识layui是什么东西所有报错。 解决方案:先... -
layui配置
2019-01-07 16:20:00layui是一个全局变量,可以在任何地方访问到 layui.config 方法主配置信息(经测试好像不能添加额外属性) layui.setter读取主配置属性 layui.extend 方法增加主配置模块 layui.use 方法引用 第一个参数(数组... -
layui layui-col-space
2019-05-22 17:46:19layui-col-space:设置后不起作用主要是因为他设置的是padding,也就是说是向内缩了,所以你设置背景色padding也是会添上颜色,看起来好像没有间距一样。 解决办法: <div class="layui-row layui-col-space10... -
layui简介
2019-05-05 23:49:32layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处... -
layui之动态数据表格
2018-07-19 09:53:14layui数据动态表格,如果返回的json格式是默认格式就好了,从api上直接copy下来用就可以,可是我这里返回的json格式如下: { "code": 200, "content": { "currentPage": 1, &... -
layui lay-verify form表单自定义验证规则
2018-10-25 14:56:06虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html: <input type="text" lay-verify="digital" ... -
layui 穿梭框 layui.transfer
2020-08-04 10:22:47本文是自己对layui.transfer 穿梭框的基本使用总结,未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式,效果还是不错的,能够满足系统中多种场景下的需求,它可以进行数据的交互筛选。 ... -
layui多选下拉框
2019-09-05 16:57:33下载组件: layui多选下拉框下载地址 文档地址:layui多选下拉框文档地址 目录结构: html: <head> <meta charset="utf-8" /> <title>layui-select</title> <link rel=... -
layui和easyui Bootstrap的对比介绍
2018-10-30 20:34:281.1layui与easyui 简单点说就是: 一个是邻家女孩,尚处芳龄,简而纯 一个是彪悍妇女,昨日黄花,强而丑 easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,... -
Layui使用入门教程
2019-07-04 19:41:51获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件: ./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/... -
layui入门
2018-08-30 10:27:091.layui结构 ├─css //css目录 │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式... -
Layui前端框架教程_layui视频教程_Layui使用教程
2019-05-05 17:17:00下面摘抄官方的一段话简单介绍一下Layui: layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积... -
笔记:layui中调用自定义函数
2018-11-15 21:22:48如何在layui中调用自定义函数 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; function functName(){} }); 调用functName().报错:未定义 改为: layui.use(['layer'... -
layui使用
2017-12-23 14:34:321.layui.all.js和layui.js layui.all.js含有全部的模块引用的位置必须放在html文件最后,也是在前面,使用模块时,不需要预加载 2.layui.js时精简版的,引入位置放在html文件的head里,使用对应的模块需要预加载...