学习layer和laydate的官方文档

　　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>
  9. <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  10. <input type="text" class="layui-input" id="test1">
  11. </div>
  12. <script src="/static/build/layui.js"></script>
  13. <script>
  14. layui.use(‘laydate‘, function(){
  15. var laydate = layui.laydate;
  16. //执行一个laydate实例
  17. laydate.render({
  18. elem: ‘#test1‘ //指定元素
  19. });
  20. });
  21. </script>
  22. </body>
  23. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用 layDate 独立版</title>
  6. </head>
  7. <body>
  8. <input type="text" id="test1">
  9. <script src="laydate.js"></script>
  10. <script>
  11. //执行一个laydate实例
  12. laydate.render({
  13. elem: ‘#test1‘ //指定元素
  14. });
  15. </script>
  16. </body>
  17. </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. });
  6. //年月选择器，只提供年、月选择
  7. laydate.render({
  8. elem: ‘#test‘
  9. ,type: ‘month‘
  10. });
  11. //日期选择器，可选择：年、月、日。type默认值，一般可不填
  12. laydate.render({
  13. elem: ‘#test‘
  14. //,type: ‘date‘ //默认，可不填
  15. });
  16. //时间选择器，只提供时分秒
  17. laydate.render({
  18. elem: ‘#test‘
  19. ,type: ‘time‘
  20. });
  21. //日期时间选择器，可选择：年、月、日、时、分、秒
  22. laydate.render({
  23. elem: ‘#test‘
  24. ,type: ‘datetime‘
  25. });

　　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. });
  6. //传入Date对象给初始值
  7. laydate.render({
  8. elem: ‘#test‘
  9. ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
  10. });

　　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. });
  7. //日期有效范围限定在：过去一周到未来一周
  8. laydate.render({
  9. elem: ‘#test‘
  10. ,min: -7 //7天前
  11. ,max: 7 //7天后
  12. });
  13. //日期时间有效范围的设定:
  14. laydate.render({
  15. elem: ‘#test‘
  16. ,type: ‘datetime‘
  17. ,min: ‘2017-8-11 12:30:00‘
  18. ,max: ‘2017-8-18 12:30:00‘
  19. });
  20. //时间有效范围设定在: 上午九点半到下午五点半
  21. laydate.render({
  22. elem: ‘#test‘
  23. ,type: ‘time‘
  24. ,min: ‘09:30:00‘
  25. ,max: ‘17:30:00‘
  26. });

　　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

时间： 2024-10-18 22:35:08

学习layer和laydate的官方文档的相关文章

教你如何阅读Oracle数据库官方文档

< Ask Oracle官方原创 > Oracle 官方文档 数量庞大,而且往往没有侧重点,让oracle新手看起来很费力.但是,仍有很多Oracle使用者认为任何oracle学习资料都比不上Oracle官方文档的权威和扼要,且兼具基础与全面.这种差异可能与个人的阅读方法有很大关系, <Ask Oracle官方原创> Oracle官方文档数量庞大,而且往往没有侧重点,让oracle新手看起来很费力.但是,仍有很多Oracle使用者认为任何oracle学习资料都比不上Oracle官方

Spring 4 官方文档学习（十一）Web MVC 框架之配置Spring MVC

在前面的文档中讲解了Spring MVC的特殊beans,以及DispatcherServlet使用的默认实现.在本部分,你会学习两种额外的方式来配置Spring MVC.分别是:MVC Java config 和  MVC XML namespace. 原文: Section 22.2.1, "Special Bean Types In the WebApplicationContext" and Section 22.2.2, "Default DispatcherSer

Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion

前言 在Spring Framework官方文档中,这三者是放到一起讲的,但没有解释为什么放到一起.大概是默认了读者都是有相关经验的人,但事实并非如此,例如我.好在闷着头看了一遍,又查资料又敲代码,总算明白了. 其实说穿了一文不值,我们用一个例子来解释: 假定,现有一个app,功能是接收你输入的生日,然后显示你的年龄.看起来app只要用当前日期减去你输入的日期就是年龄,应该很简单对吧?可惜事实不是这样的. 这里面有三个问题: 问题一:我们输入的永远是字符串,字符串需要转成日期格式才能被我们的ap

Spring 4 官方文档学习（十二）View技术

1.介绍 Spring 有很多优越的地方,其中一个就是将view技术与MVC框架的其他部分相隔离.例如,在JSP存在的情况下使用Groovy Markup Templates 还是使用Thymeleaf,仅仅是一个配置问题. 本章覆盖了主要的view技术,嗯嗯,可以与Spring结合的那些,并简明的说明了如何增加新的view技术. 本章假定你已经熟悉了Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图 -- 它覆盖了views如何耦合到MVC框架

Python3.5.2官方文档学习备忘录

网址:https://docs.python.org/3/ 虽然学习官方文档有些耗时,不过看最原版的还是感觉好一点,原汁原味没有曲解没有省略. 从命令行向Python传递参数,运行:python - abc def import sys sys.argv 在命令行下的显示结果:['-','abc','def'] 在命令行中运行python,_ 变量会保存上一次运行的结果 >>> tax = 12.5 / 100 >>> price = 100.50 >>&g

Swift -- 官方文档Swift-Guides的学习笔记

在经历的一段时间的郁闷之后,我发现感情都是虚伪的,只有代码是真实的(呸) 因为看了swift语法之后依然不会用swift,然后我非常作死的跑去看官方文档,就是xcode里自带的help>documentation and API reference 其中的swift里的guide 这里主要总结一下里面每一章讲了什么,还有自己学到的东西和需要研究的东西 part 2:Building a Basic UI work with view controllers 关于比较基础的viewDidLoad,

Spring 4 官方文档学习（五）核心技术之SpEL

1.介绍 SpEL支持在runtime 查询.操作对象图. 2.功能概览 英文 中文 Literal expressions 字面值表达式 Boolean and relational operators 布尔和关系操作符 Regular expressions  正则表达式 Class expressions 类表达式 Accessing properties, arrays, lists, maps 访问properties.arrays.lists.maps Method invocati

Jinja2学习笔记暨官方文档的翻译

http://blog.csdn.net/lgg201/article/details/4647471 呵呵, 刚刚看完Python模板引擎Jinja2的文档, 感觉很好, 觉得动态语言真是很好.  模板引擎竟然可以做的如此灵活....真是不错.... 下面直接把看文档过程的笔记发布出来, 呵呵, 基本上就是翻译, 加了不多的一点自己的解释......希望可以帮到大家 补充: 1. 在模板中设置自定义变量: {% set variable_name = value %} 比如设置{% set u

Spring 4 官方文档学习（十一）Web MVC 框架之resolving views 解析视图

接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolvers,可以让你在浏览器中render model,而不必绑定到某种特定的view技术上.开箱即用,例如,Spring可以让你使用JSPs.Velocity目标和XSLT views.See Chapter 23, View technologies for a discussion of how