码迷,mamicode.com
首页 > 其他好文 > 详细

学习layer和laydate的官方文档

时间:2018-07-23 19:55:29      阅读:2315      评论:0      收藏:0      [点我收藏+]

标签:北京时间   head   dom   方法   格式   组合   添加   支持   数组   

  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文件,就可以作为独立组件使用,这样能满足管理系统中对弹出层和时间展示和操作。

 

学习layer和laydate的官方文档

标签:北京时间   head   dom   方法   格式   组合   添加   支持   数组   

原文地址:https://www.cnblogs.com/senleyumi/p/9356022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!