layui——util模块
(2018-03-01 13:17:12)
标签:
layui |
分类: 前端开发 |
1 右下角固定块
语法:util.fixbar(options)
参数
类型
描述
bar1
Boolean/String
默认false。如果值为true,则显示第一个bar,带有一个默认图标。如果值为图标字符,则显示第一个bar,并覆盖默认图标
bar2
Boolean/String
默认false。如果值为true,则显示第二个bar,带有一个默认图标。如果值为图标字符,则显示第二个bar,并覆盖默认图标
bgcolor
String
自定义区块背景色
showHeight Number
用于控制出现TOP按钮的滚动条高度临界值。默认:200
css
Object
你可以通过重置bar的位置,比如 css: {right: 100, bottom:
100}
click
Function
点击bar的回调,函数返回一个type参数,用于区分bar类型。支持的类型有:bar1、bar2、top
TOP按钮,示例:
var util = layui.util;
util.fixbar(); // 不设参数,默认是滚动200px会自动显示top按钮;
小结
fixbar允许用户自定义2个按钮(默认是信息、问号图标),还有一个top按钮是默认就有的,top按钮通过showHeight控制在什么时候显示;按钮1、按钮2通过bar1、bar2控制是否显示;click事件返回的type类型可以判断单击的是哪个按钮;
这块功能很实用,特别是top按钮,自定义按钮只能2个这点不灵活,但是一般场景够用!
2 倒计时
语法:util.countdown(endTime, serverTime, callback)
参数 说明
endTime 结束时间戳或Date对象,如:4073558400000,或:new
Date(2099,1,1).
serverTime 当前服务器时间戳或Date对象
callback 回调函数。每一秒都会执行一次,并且返回三个参数: date(包含天/时/分/秒的对象)、
serverTime(当前服务器时间戳或Date对象), timer(计时器返回的ID值,用于clearTimeout)
示例
util.countdown(endTime, serverTime, function(date, serverTime,
timer){
var str = date[0] + '天' + date[1] + '时' +
date[2] + '分' + date[3] + '秒';
});
3 某个时间在当前时间的多久前
某个时间在当前时间的多久前。
参数 time:即为某个时间的时间戳或日期对象
参数 onlyDate:是否在超过30天后,只返回日期字符,而不返回时分秒
如果在3分钟以内,返回:刚刚
如果在30天以内,返回:若干分钟前、若干小时前、若干天前,如:5分钟前
如果在30天以上,返回:日期字符,如:2017-01-01
var setTimeAgo = function(y, M, d, H, m, s){
var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0,
s||0));
lay('#test4').html(str);
};
laydate.render({
elem: '#test3'
,type: 'datetime'
,done: function(value, date){
setTimeAgo(date.year, date.month - 1, date.date, date.hours,
date.minutes, date.seconds);
}
});
说明:在发帖场景中有用到,可以显示当前帖子的发送时间;
4 日期时间转字符串
util.toDateString(time, format)
转化时间戳或日期对象为日期格式字符
参数 time:可以是日期对象,也可以是毫秒数
参数 format:日期字符格式(默认:yyyy-MM-dd
HH:mm:ss),可随意定义,如:yyyy年MM月dd日
5 数字前置补零
util.digit(num, length)
参数 num:原始数字
参数 length:数字长度(默认2),如果原始数字长度小于 length,则前面补零,如:util.digit(7, 3)
//007
参考官方文档:http://www.layui.com/doc/
前一篇:layui——code模块
后一篇:layui——layer模块