学习layer和laydate的官方文档

最新推荐文章于 2022-12-04 19:23:59 发布

weixin_30872733

最新推荐文章于 2022-12-04 19:23:59 发布

阅读量273

点赞数

原文链接：http://www.cnblogs.com/senleyumi/p/9356022.html

版权

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

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

weixin_30872733

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习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模块化使用。具体使...
复制链接

扫一扫