搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

工具集文档 - layui.util

我们将一些工具性元素放入 util 模块中,以供选择性使用。其内部由多个小工具组件组成,他们也许不是必须的,但很多时候却能为你的页面提供良好的辅助作用。
模块加载名称:util
固定块

语法:util.fixbar(options)
其中参数 options 是一个对象,可支持的key如下表:

参数 类型 描述
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

例子code

  1. layui.use('util', function(){
  2. var util = layui.util;
  3. //执行
  4. util.fixbar({
  5. bar1: true
  6. ,click: function(type){
  7. console.log(type);
  8. if(type === 'bar1'){
  9. alert('点击了bar1')
  10. }
  11. }
  12. });
  13. });
倒计时

这是一个精致的封装,它并不负责视图的呈现,而仅返回倒计时数值,这意味着你可以将它应用在任何倒计时相关的业务中。

语法:util.countdown(endTime, serverTime, callback)

参数 说明
endTime 结束时间戳或Date对象,如:4073558400000,或:new Date(2099,1,1).
serverTime 当前服务器时间戳或Date对象
callback 回调函数。如果倒计时尚在运行,则每一秒都会执行一次。并且返回三个参数: date(包含天/时/分/秒的对象)、 serverTime(当前服务器时间戳或Date对象), timer(计时器返回的ID值,用于clearTimeout)

例子code

  1. <div id="test"></div>
  2. <script>
  3. layui.use('util', function(){
  4. var util = layui.util;
  5. //示例
  6. var endTime = new Date(2099,1,1).getTime() //假设为结束日期
  7. ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  8. util.countdown(endTime, serverTime, function(date, serverTime, timer){
  9. var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
  10. layui.$('#test').html('距离2099年1月1日还有:'+ str);
  11. });
  12. });
  13. </script>
其它方法
方法 说明
util.timeAgo(time, onlyDate) 某个时间在当前时间的多久前。
参数 time:即为某个时间的时间戳或日期对象
参数 onlyDate:是否在超过30天后,只返回日期字符,而不返回时分秒

如果在3分钟以内,返回:刚刚
如果在30天以内,返回:若干分钟前若干小时前若干天前,如:5分钟前
如果在30天以上,返回:日期字符,如:2017-01-01
util.toDateString(time, format) 转化时间戳或日期对象为日期格式字符
参数 time:可以是日期对象,也可以是毫秒数
参数 format:日期字符格式(默认:yyyy-MM-dd HH:mm:ss),可随意定义,如:yyyy年MM月dd日
util.digit(num, length) 数字前置补零
参数 num:原始数字
参数 length:数字长度,如果原始数字长度小于 length,则前面补零,如:util.digit(7, 3) //007
util.escape(str) 转义 xss 字符
参数 str:任意字符
util.event(attr, obj, eventType) 用于更好地批量处理事件。
参数 attr:绑定需要监听事件的元素属性
参数 obj:事件回调链
参数 eventType:事件类型(默认 click)

示例:

</>code

  1. HTML:
  2. <button class="layui-btn" lay-active="e1">事件1</button>
  3. <button class="layui-btn" lay-active="e2">事件2</button>
  4. <button class="layui-btn" lay-active="e3">事件3</button>
  5. JavaScript:
  6. <script>
  7. layui.use('util', function(){
  8. var util = layui.util;
  9. //处理属性 为 lay-active 的所有元素事件
  10. util.event('lay-active', {
  11. e1: function(othis){
  12. alert('触发了事件1');
  13. }
  14. ,e2: function(othis){
  15. alert('触发了事件2');
  16. }
  17. ,e3: function(othis){
  18. alert('触发了事件3');
  19. }
  20. });
  21. });
  22. </script>
结语

工具模块往往应用在边边角角,将不定期增加。

layui - 在每一个细节中,用心与你沟通