博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
学习layer和laydate的官方文档
阅读量：5336 次
发布时间：2019-06-15

本文共 6468 字，大约阅读时间需要 21 分钟。

　　layer是一个Web弹窗组件，laydate是一个日期和时间组件。二者都是layui的组件。layer的官方文档：http://www.layui.com/doc/modules/layer.html/，laydate的官方文档：http://www.layui.com/doc/modules/laydate.html，layer可以独立使用，也可以通过layui模块化使用。具体使用参考layer的官方文档。

一、学习layer中常用的基础参数

　　一般在调用layer的open或msg方法时用到的基础参数（配置项）如：layer.open({content : ' '}),layer.msg({' ' , time : 3})等。

　　layer提供了5中层类型：0（信息框），1（页面层），2（iframe层），3（加载层），4（tips层）。默认是0，layer.open({type : 2})，这样的描述方式可以改变层类型。

　　layer的标题：layer.open({title : false})表示没有标题，layer.open({title : '班级信息'})表示标题，layer.open({title : ['班级信息',font-size:18px;]})表示标题可以添加任意CSS样式。

　　layer的内容：content可以传HTML页面，可以指定DOM，更可以随着type的不同而不同。官方文档的示例如下。

  //页面层

  1. layer.open({
  2. type: 1,
  3. content: '传入任意的文本或html' //这里content是一个普通的String
  4. });
  1. layer.open({
  2. type: 1,
  3. content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
  4. });

  //Ajax获取

  1. $.post('url', {}, function(str){
  2. layer.open({
  3. type: 1,
  4. content: str //注意，如果str是object，那么需要字符拼接。
  5. });
  6. });

  //iframe层

  1. layer.open({
  2. type: 2,
  3. content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
  4. });

//tips层

  1. layer.open({
  2. type: 4,
  3. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  4. });

　　layer的宽高：默认情况下宽高是自适应的，只定义宽度如area : '500px'，高度依然是自适应的。宽高都定义如area : ['500px','300px']。layer默认的坐标是垂直水平居中。

　　layer的层弹出成功后的回调方法success：当需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数分别是当前层的DOM和当前层的索引。官方文档示例如下。

  1. layer.open({
  2. content: '测试回调',
  3. success: function(layero, index){
  4. console.log(layero, index);
  5. }
  6. });

　　layer的原始核心方法open：所有创建层的方式都是layer.open({options})，创建任何类型的层都会返回当前层索引index,index是layer.close()等方法的必传参数，options是基础参数.

　　layer的提示框：layer.msg(content,options,end)，一般3s后自动消失。官方文档示例如下。

  1. //eg1
  2. layer.msg('只想弱弱提示');
  3. //eg2
  4. layer.msg('有表情地提示', {icon: 6});
  5. //eg3
  6. layer.msg('关闭后想做些什么', function(){
  7. //do something
  8. });
  9. //eg
  10. layer.msg('同上', {
  11. icon: 1,
  12. time: 2000 //2秒关闭（如果不配置，默认是3秒）
  13. }, function(){
  14. //do something
  15. });

二、学习laydate中常用的时间控件

　　在layui模块中使用，官方文档示例如下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layDate快速使用</title>
  6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
  7. </head>
  8. <body>
  10. <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  11. <input type="text" class="layui-input" id="test1">
  12. </div>
  14. <script src="/static/build/layui.js"></script>
  15. <script>
  16. layui.use('laydate', function(){
  17. var laydate = layui.laydate;
  19. //执行一个laydate实例
  20. laydate.render({
  21. elem: '#test1' //指定元素
  22. });
  23. });
  24. </script>
  25. </body>
  26. </html>

　　作为独立组件使用，官方文档如下。

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用 layDate 独立版</title>
  6. </head>
  7. <body>
  9. <input type="text" id="test1">
  11. <script src="laydate.js"></script>
  12. <script>
  13. //执行一个laydate实例
  14. laydate.render({
  15. elem: '#test1' //指定元素
  16. });
  17. </script>
  18. </body>
  19. </html>

　　laydate的绑定元素：用于绑定日期渲染的元素，值一般为选择器或DOM对象，官方文档示例如下。

  1. laydate.render({
  2. elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  3. });

　　laydate的时间选择类型：用于提供不同的选择器类型。官方文档示例如下。

  1. //年选择器，只提供年列表选择
  2. laydate.render({
  3. elem: '#test'
  4. ,type: 'year'
  5. });
  7. //年月选择器，只提供年、月选择
  8. laydate.render({
  9. elem: '#test'
  10. ,type: 'month'
  11. });
  13. //日期选择器，可选择：年、月、日。type默认值，一般可不填
  14. laydate.render({
  15. elem: '#test'
  16. //,type: 'date' //默认，可不填
  17. });
  19. //时间选择器，只提供时分秒
  20. laydate.render({
  21. elem: '#test'
  22. ,type: 'time'
  23. });
  25. //日期时间选择器，可选择：年、月、日、时、分、秒
  26. laydate.render({
  27. elem: '#test'
  28. ,type: 'datetime'
  29. });

　　laydate的开启左右面板范围选择：默认是false，改为true则用“-”分割，也可自定义分割字符。五种类型的时间选择器都支持左右面板，将基础参数添加range : true或者自定义range : '~'。

　　laydate的日期时间自定义格式：通过不同格式符可以组合成一段日期时间字符串。

yyyy 年份，至少四位数。如果不足四位，则前面补零
y 年份，不限制位数，即不管年份多少位，前面均不补零
MM 月份，至少两位数。如果不足两位，则前面补零。
M 月份，允许一位数。
dd 日期，至少两位数。如果不足两位，则前面补零。
d 日期，允许一位数。
HH 小时，至少两位数。如果不足两位，则前面补零。
H 小时，允许一位数。
mm 分钟，至少两位数。如果不足两位，则前面补零。
m 分钟，允许一位数。
ss 秒数，至少两位数。如果不足两位，则前面补零。
s 秒数，允许一位数。

 

 

 

 

 

 

 

 

 

　　

yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒
yyyyMMdd 20170818
dd/MM/yyyy 18/08/2017
yyyy年M月 2017年8月
M月d日 8月18日
北京时间：HH点mm分 北京时间：20点08分
yyyy年的M月某天晚上，大概H点 2017年的8月某天晚上，大概20点

 

 

 

 

 

 

 

 

 

  1. //自定义日期格式
  2. laydate.render({
  3. elem: '#test'
  4. ,format: 'yyyy年MM月dd日' //可任意组合
  5. });

　　laydate的初始值：支持符合format参数设定的日期格式，或New Date()。官方文档示例如下。

  1. //传入符合format格式的字符给初始值
  2. laydate.render({
  3. elem: '#test'
  4. ,value: '2018-08-18' //必须遵循format参数设定的格式
  5. });
  7. //传入Date对象给初始值
  8. laydate.render({
  9. elem: '#test'
  10. ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
  11. });

　　laydate的初始值填充：用于控制是否自动向元素填充初始值。需配合value参数使用，官方文档示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,value: '2017-09-10'
  4. ,isInitValue: false //是否允许填充初始值，默认为 true
  5. });

　　laydate的最大/最小范围内的日期时间值：设定有限范围的日期或者时间值，不再范围内的将不可选中。官方文档示例如下。

1. 如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
2. 如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
3. 如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

 

 

 

  1. //日期有效范围只限定在：2017年
  2. laydate.render({
  3. elem: '#test'
  4. ,min: '2017-1-1'
  5. ,max: '2017-12-31'
  6. });
  8. //日期有效范围限定在：过去一周到未来一周
  9. laydate.render({
  10. elem: '#test'
  11. ,min: -7 //7天前
  12. ,max: 7 //7天后
  13. });
  15. //日期时间有效范围的设定:
  16. laydate.render({
  17. elem: '#test'
  18. ,type: 'datetime'
  19. ,min: '2017-8-11 12:30:00'
  20. ,max: '2017-8-18 12:30:00'
  21. });
  23. //时间有效范围设定在: 上午九点半到下午五点半
  24. laydate.render({
  25. elem: '#test'
  26. ,type: 'time'
  27. ,min: '09:30:00'
  28. ,max: '17:30:00'
  29. });

　　laydate自定义弹出控件事件：如果绑定事件非输入框，默认事件为click。官方文档示例如下。

  1. //自定义事件
  2. laydate.render({
  3. elem: '#test'
  4. ,trigger: 'click' //采用click弹出
  5. });

　　laydate定位方式：定位方式有三种。

position 可选值 说明
abolute 绝对定位，始终吸附在绑定元素周围。默认值
fixed 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static 静态定位，控件将直接嵌套在指定容器中。 
注意：请勿与 show 参数的概念搞混淆。show为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示

 

 

 

 

　　laydate显示底部栏：默认显示底部栏。设置为false则不显示。官方文档示例如下。

  1. //不显示底部栏
  2. laydate.render({
  3. elem: '#test'
  4. ,showBottom: false
  5. });

　　laydate初始打开的回调：初始的日期时间对象。官方文档示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,ready: function(date){
  4. console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  5. }
  6. });

　　laydate日期时间被切换后的回调：毁掉返回三个参数，分别是生成的值，日期时间对象，结束的日期时间对象。官方文档示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,change: function(value, date, endDate){
  4. console.log(value); //得到日期生成的值，如：2017-08-18
  5. console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6. console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  7. }
  8. });

　　laydate控件选择完毕后的回调：点击日期，清空，现在，确定均会触发。返回三个参数，生成的值，日期时间对象，结束的日期时间对象。官方文档示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,done: function(value, date, endDate){
  4. console.log(value); //得到日期生成的值，如：2017-08-18
  5. console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6. console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  7. }
  8. });

三、结束语

　　layer和laydate作为前端组件，使用时在项目中引用对应的js或css文件，就可以作为独立组件使用，这样能满足管理系统中对弹出层和时间展示和操作。

 

转载于:https://www.cnblogs.com/senleyumi/p/9356022.html

你可能感兴趣的文章
Redis常用命令
查看>>
2019.02.15 bzoj5210: 最大连通子块和（链分治+ddp）
查看>>
微软职位内部推荐-Sr. SE - Office incubation
查看>>
C#类与结构体究竟谁快——各种函数调用模式速度评测
查看>>
我到底要选择一种什么样的生活方式，度过这一辈子呢：人生自由与职业发展方向(下)...
查看>>
poj 题目分类
查看>>
windows 安装yaml支持和pytest支持等
查看>>
读书笔记：季羡林关于如何做研究学问的心得
查看>>
面向对象的优点
查看>>
套接口和I/O通信
查看>>
阿里巴巴面试之利用两个int值实现读写锁
查看>>
浅谈性能测试
查看>>
Winform 菜单和工具栏控件
查看>>
CDH版本大数据集群下搭建的Hue详细启动步骤（图文详解）
查看>>
巧用Win+R
查看>>
浅析原生js模仿addclass和removeclass
查看>>
Python中的greenlet包实现并发编程的入门教程
查看>>
java中遍历属性字段及值（常见方法）
查看>>
深入理解jQuery框架-框架结构
查看>>
YUI3自动加载树实现
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-28 20:48:49   当前IP: 3.148.106.49   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我