前言
由于找不到一款完全符合自己需求的web-loading组件,没办法自己动手写一个得了,拓展jQuery插件,封装为layui组件。
因时间短,组件及文档可能不是很完美,大家觉得有用就用用,有问题可以邮件给我:neusofts#neusofts.com(#换成@,一直没注意,之前留的邮箱少了一个s,晕)
版本更新:
v2.0
(未来版本)
- 待新增:自定义div对象(CSS3场景);
- 待处理:因img预加载导致loading显示延迟的问题;
v1.3
(最新版)
- 修复:父节点移除后导致loading实例报错的bug;
- 修复:afterHideAll默认覆盖全局配置,以最后调用为基准;
- 增强:img和text样式初始化设置;
- 新增:inheritRadius参数,是否继承父节点边框的值;
- 新增:文档的几个示例;
v1.2
- 新增:title配置,自定义div、img、text的hover显示内容;
- 修复:resize方法的处理逻辑及性能;
- 修复:有无img、text场景下的坐标计算错误bug;
- 兼容:IE8+、chrome、firefox、oprea、safari等浏览器;
v1.1
- 更新:某些场景下loading计算坐标错误的bug;
- 更新:无img时text加载延迟的bug;
- 兼容:safari的position计算方法不规范导致的bug;
- 兼容:IE8+、chrome、firefox、oprea、safari等浏览器;
v1.0
- 发布:组件发布
查看文档
Loading组件 之 自定义配置及演示(兼容IE8+)
遮罩层
有无遮罩层
注:opacity为0时无遮罩层标签
遮罩背景色
遮罩class名
遮罩透明度
选择透明度
0无遮罩(请使用“有无遮罩层”)
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1.0
注:opacity为0时无遮罩层
边框继承
注:自定义遮罩层是否继承父节点的边框效果,默认false
图片
图片class名
备选图片
选择备选编号 / 填写路径
不显示图片
0
1
2
3
4
5
6
7
8
9
10
注:默认编码为0,为null时无图片,可自定义图片路径
图片路径
注:默认备选编号为0,值为null时无图片,
推荐:
https://loading.io,不考虑IE可使用svg格式文件
文本
显示文本
文本Css
注:默认为空,格式{color: '#000'}
文本class名
回调
回调函数
注:“隐藏后”的回调同样对“销毁”有效(全部隐藏的回调默认覆盖全局配置,最后配置及调用者优先级最高)
其它
单击关闭
注:单击关闭loading,遮罩、图片、文本均有效(一般配合回调使用)
Top偏移量
注:默认为0,自定义图片、文本的top偏移量(针对图片和文本同时显示且两者绝对居中的微调场景)
hover提示
注:默认为空字符串,自定义div、img、text的hover提示
动画时长
注:默认为600,为0时关闭动画效果
遮罩z-index
注:默认为19999999(1,000,000),同时imgZIndex = overlayZIndex + 1
生成配置
自定义配置 /
默认预览区
正在生成自定义配置...
预览配置
重置设置
关闭所有
按配置全屏(3s)
按配置layer(5s)
按配置多区域
上传按钮
叠加嵌套
日期控件
Text效果
全局配置及使用文档
$(element).loading(); // 此方式 “仅调用show方法” $(element).loading({ ... }); // 重要提示:此方式会更新 “全局配置 + 执行show方法” // 配置说明 options = { overlayClassName: '' // 类型String,自定义遮罩层className,可多个,默认空String , imgClassName: '' // 类型String,自定义image的className,可多个,默认空String , background: '#fff' // 类型String,自定义遮罩层背景色,默认#fff , opacity: 0.6 // 类型Number,自定义遮罩层的透明度,默认0.6,注:为0时无遮罩层 , text: '' // 类型String,自定义loading文本,默认空String,注:非空时参考offsetTop设置 , textCss: {} // 类型Object,自定义loading文本样式,默认空{} , textClassName: '' // 类型String,自定义文本的className,可多个,默认空String , title: '' // 类型String,自定义div、img、text的title,默认空String , offsetTop: 0 // 类型Number,自定义图片+文本模式的top偏移量,注:text为空时无需设置offsetTop , imgSrc: 0 // 类型String|null|Number,自定义loading图片,默认为图片序列的0索引(共0-10),可自定义url路径,注:为null时无图片 , beforeShow: function () {} // 类型Function,自定义loading显示前的回调,默认空Function,参数1=this,参数2=jQuery , afterShow: function () {} // 类型Function,自定义loading显示后的回调,默认空Function,参数1=this,参数2=jQuery,参数3=$loading , imgZIndex: 19999999+1 // 类型Number,自定义图片的z-index值,默认19999999+1 , overlayZIndex: 19999999 // 类型Number,自定义遮罩层的z-index值,默认19999999 , afterHide: function () {} // 类型Function,自定义loading隐藏/销毁后的回调,默认空Function,参数1=this,参数2=jQuery,参数3=$loading(销毁时无参数3) , afterHideAll: function () {} // 类型Function,自定义全部loading隐藏/销毁后的回调,默认空Function,参数1=this,参数2=jQuery,参数3=$loading(销毁时无参数3) , animateTime: 600 // 类型Number,自定义loading显示/隐藏的动画时长,默认600毫秒,注:为0时无动画 , clickHide: false // 类型Boolean,自定义单击loading遮罩层/图片/文字是否隐藏loading,默认false , inheritRadius: false // 类型Boolean,自定义遮罩层是否继承父节点的边框效果,默认false }
回调
beforeShow
afterShow
afterHide
afterHideAll
// loading显示之前的回调 var loading = $(element).loading('show', { /* 私有配置 */ beforeShow: function (loading, $obj) { // loading == this; // $obj == $(element); // 回调内容 } });
// loading显示之后的回调 var loading = $(element).loading('show', { /* 私有配置 */ afterShow: function (loading, $obj, $loading) { // loading == this; // $obj == $(element); // $loading == $(div,img,text); // 回调内容 } });
// loading隐藏之后的回调 var loading = $(element).loading('show', { /* 私有配置 */ afterHide: function (loading, $obj, $loading?) { // loading == this; // $obj == $(element); // $loading? == $(div,img,text); 销毁时无此参数 // 回调内容 } });
// loading全部隐藏之后的回调(注:全部隐藏的回调默认覆盖全局配置,最后配置及调用者优先级最高) var loading = $(element).loading('show', { /* 私有配置 */ afterHideAll: function (loading, $obj, $loading?) { // loading == this; // $obj == $(element); // $loading? == $(div,img,text); 全部销毁时无此参数 // 回调内容 } });
方法
show()
toggle()
hide()
hideAll()
destroy()
destroyAll()
/* - 可以直接jQuery对象调用,也可以创建一个loading对象,以备用; - 注:如果是jQuery对象数组,则返回的loading也是对应的对象数组; - 注:若jQuery数组中包含body,则默认只对body有效(body最好单独调用); - 注:destroy/destroyAll后loading对象仍可调用show等方法; - 更详尽的说明,请查看源码中的注释; */ // show(loading.show()不支持链式调用) var loading = $(element).loading('show', { /* 私有配置 */ });
// hide <--> show $(element).loading('toggle'); // 或者 loading.toggle(); // 支持链式调用
// hide $(element).loading('hide'); // 或者 loading.hide(); // 支持链式调用
// hideAll $(element).loading('hideAll'); // 或者 loading.hideAll(); // 支持链式调用
// destroy(注:为避免切换页面兼容性,配合onload的loading隐藏建议使用destroy注销对象) $(element).loading('destroy'); // 或者 loading.destroy(); // 支持链式调用
// destroyAll $(element).loading('destroyAll'); // 或者 loading.destroyAll(); // 支持链式调用
事件
show
hide
hideAll
destroy
destroyAll
$(element).on('lay-loading.show', function (event, loadingObj) { // 监听show事件的回调 });
$(element).on('lay-loading.hide', function (event, loadingObj) { // 监听hide事件的回调 });
$(element).on('lay-loading.hideAll', function (event, loadingObj) { // 监听hideAll事件的回调 });
$(element).on('lay-loading.destroy', function (event, loadingObj) { // 监听destroy事件的回调 });
$(element).on('lay-loading.destroyAll', function (event, loadingObj) { // 监听destroyAll事件的回调 });