学习layer和laydate的官方文档
Posted senleyumi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习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的不同而不同。官方文档的示例如下。
//页面层
- layer.open({
- type: 1,
- content: ‘传入任意的文本或html‘ //这里content是一个普通的String
- });
- layer.open({
- type: 1,
- content: $(‘#id‘) //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
- });
//Ajax获取
- $.post(‘url‘, {}, function(str){
- layer.open({
- type: 1,
- content: str //注意,如果str是object,那么需要字符拼接。
- });
- });
//iframe层
- layer.open({
- type: 2,
- content: ‘http://sentsin.com‘ //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: [‘http://sentsin.com‘, ‘no‘]
- });
//tips层
- layer.open({
- type: 4,
- content: [‘内容‘, ‘#id‘] //数组第二项即吸附元素选择器或者DOM
- });
layer的宽高:默认情况下宽高是自适应的,只定义宽度如area : ‘500px‘,高度依然是自适应的。宽高都定义如area : [‘500px‘,‘300px‘]。layer默认的坐标是垂直水平居中。
layer的层弹出成功后的回调方法success:当需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数分别是当前层的DOM和当前层的索引。官方文档示例如下。
- layer.open({
- content: ‘测试回调‘,
- success: function(layero, index){
- console.log(layero, index);
- }
- });
layer的原始核心方法open:所有创建层的方式都是layer.open({options}),创建任何类型的层都会返回当前层索引index,index是layer.close()等方法的必传参数,options是基础参数.
layer的提示框:layer.msg(content,options,end),一般3s后自动消失。官方文档示例如下。
- //eg1
- layer.msg(‘只想弱弱提示‘);
- //eg2
- layer.msg(‘有表情地提示‘, {icon: 6});
- //eg3
- layer.msg(‘关闭后想做些什么‘, function(){
- //do something
- });
- //eg
- layer.msg(‘同上‘, {
- icon: 1,
- time: 2000 //2秒关闭(如果不配置,默认是3秒)
- }, function(){
- //do something
- });
二、学习laydate中常用的时间控件
在layui模块中使用,官方文档示例如下。
- <!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>
作为独立组件使用,官方文档如下。
- <!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的绑定元素:用于绑定日期渲染的元素,值一般为选择器或DOM对象,官方文档示例如下。
- laydate.render({
- elem: ‘#test‘ //或 elem: document.getElementById(‘test‘)、elem: lay(‘#test‘) 等
- });
laydate的时间选择类型:用于提供不同的选择器类型。官方文档示例如下。
- //年选择器,只提供年列表选择
- laydate.render({
- elem: ‘#test‘
- ,type: ‘year‘
- });
- //年月选择器,只提供年、月选择
- laydate.render({
- elem: ‘#test‘
- ,type: ‘month‘
- });
- //日期选择器,可选择:年、月、日。type默认值,一般可不填
- laydate.render({
- elem: ‘#test‘
- //,type: ‘date‘ //默认,可不填
- });
- //时间选择器,只提供时分秒
- laydate.render({
- elem: ‘#test‘
- ,type: ‘time‘
- });
- //日期时间选择器,可选择:年、月、日、时、分、秒
- laydate.render({
- elem: ‘#test‘
- ,type: ‘datetime‘
- });
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点 |
- //自定义日期格式
- laydate.render({
- elem: ‘#test‘
- ,format: ‘yyyy年MM月dd日‘ //可任意组合
- });
laydate的初始值:支持符合format参数设定的日期格式,或New Date()。官方文档示例如下。
- //传入符合format格式的字符给初始值
- laydate.render({
- elem: ‘#test‘
- ,value: ‘2018-08-18‘ //必须遵循format参数设定的格式
- });
- //传入Date对象给初始值
- laydate.render({
- elem: ‘#test‘
- ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
- });
laydate的初始值填充:用于控制是否自动向元素填充初始值。需配合value参数使用,官方文档示例如下。
- laydate.render({
- elem: ‘#test‘
- ,value: ‘2017-09-10‘
- ,isInitValue: false //是否允许填充初始值,默认为 true
- });
laydate的最大/最小范围内的日期时间值:设定有限范围的日期或者时间值,不再范围内的将不可选中。官方文档示例如下。
1. | 如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式 |
2. | 如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后 |
3. | 如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日 |
- //日期有效范围只限定在:2017年
- laydate.render({
- elem: ‘#test‘
- ,min: ‘2017-1-1‘
- ,max: ‘2017-12-31‘
- });
- //日期有效范围限定在:过去一周到未来一周
- laydate.render({
- elem: ‘#test‘
- ,min: -7 //7天前
- ,max: 7 //7天后
- });
- //日期时间有效范围的设定:
- laydate.render({
- elem: ‘#test‘
- ,type: ‘datetime‘
- ,min: ‘2017-8-11 12:30:00‘
- ,max: ‘2017-8-18 12:30:00‘
- });
- //时间有效范围设定在: 上午九点半到下午五点半
- laydate.render({
- elem: ‘#test‘
- ,type: ‘time‘
- ,min: ‘09:30:00‘
- ,max: ‘17:30:00‘
- });
laydate自定义弹出控件事件:如果绑定事件非输入框,默认事件为click。官方文档示例如下。
- //自定义事件
- laydate.render({
- elem: ‘#test‘
- ,trigger: ‘click‘ //采用click弹出
- });
laydate定位方式:定位方式有三种。
position 可选值 | 说明 |
---|---|
abolute | 绝对定位,始终吸附在绑定元素周围。默认值 |
fixed | 固定定位,初始吸附在绑定元素周围,不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。 |
static | 静态定位,控件将直接嵌套在指定容器中。 注意:请勿与 show 参数的概念搞混淆。show为 true 时,控件仍然是采用绝对或固定定位。而这里是直接嵌套显示 |
laydate显示底部栏:默认显示底部栏。设置为false则不显示。官方文档示例如下。
- //不显示底部栏
- laydate.render({
- elem: ‘#test‘
- ,showBottom: false
- });
laydate初始打开的回调:初始的日期时间对象。官方文档示例如下。
- laydate.render({
- elem: ‘#test‘
- ,ready: function(date){
- console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
- }
- });
laydate日期时间被切换后的回调:毁掉返回三个参数,分别是生成的值,日期时间对象,结束的日期时间对象。官方文档示例如下。
- laydate.render({
- elem: ‘#test‘
- ,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)才会返回。对象成员同上。
- }
- });
laydate控件选择完毕后的回调:点击日期,清空,现在,确定均会触发。返回三个参数,生成的值,日期时间对象,结束的日期时间对象。官方文档示例如下。
- laydate.render({
- elem: ‘#test‘
- ,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)才会返回。对象成员同上。
- }
- });
三、结束语
layer和laydate作为前端组件,使用时在项目中引用对应的js或css文件,就可以作为独立组件使用,这样能满足管理系统中对弹出层和时间展示和操作。
以上是关于学习layer和laydate的官方文档的主要内容,如果未能解决你的问题,请参考以下文章