JQuery+Bootstrap 自定义全屏Loading插件
/**
* 自定义Loading插件
* @param {Object} config
* {
* content[加载显示文本],
* time[自动关闭等待时间(ms)]
* }
* @param {String} config
* 加载显示文本
* @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
* @return {KZ_Loading} 对象实例
*/
function KZ_Loading(config) {
if (this instanceof KZ_Loading) {
const domTemplate = '<div class="modal fade kz-loading" data-kzid="@@KZ_Loadin_ID@@" backdrop="static" keyboard="false"><div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px"><div class="progress progress-striped active" style="margin-bottom: 0;"><div class="progress-bar" style="width: 100%;"></div></div><h5>@@KZ_Loading_Text@@</h5></div></div>';
this.config = {
content: 'loading...',
time: 0,
};
if (config != null) {
if (typeof config === 'string') {
this.config = Object.assign(this.config, {
content: config
});
} else if (typeof config === 'object') {
this.config = Object.assign(this.config, config);
}
}
this.id = new Date().getTime().toString();
this.state = 'hide'; /*显示 */
this.show = function () {
$('.kz-loading[data-kzid=' + this.id + ']').modal({
backdrop: 'static',
keyboard: false
});
this.state = 'show';
if (this.config.time > 0) {
var that = this;
setTimeout(function () {
that.hide();
}, this.config.time);
}
};
/*隐藏 */
this.hide = function (callback) {
$('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
this.state = 'hide';
if (callback) {
callback();
}
};
/*销毁dom */
this.destroy = function () {
var that = this;
this.hide(function () {
var node = $('.kz-loading[data-kzid=' + that.id + ']');
node.next().remove();
node.remove();
that.show = function () {
throw new Error('对象已销毁!');
};
that.hide = function () {};
that.destroy = function () {};
});
} var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content);
$('body').append(domHtml);
} else {
return new KZ_Loading(config);
}
}
基本调用:
var loading = new KZ_Loading('数据加载中。。。');
setTimeout(function () {
console.log('加载完成!');
loading.hide();
}, 1000);
自动关闭:
var loading = new KZ_Loading({
content: '数据加载中。。。',
time: 2000
});
loading.show();
销毁Loading Dom节点:
loading.destroy();
JQuery+Bootstrap 自定义全屏Loading插件的更多相关文章
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- jquery.fullPage.js全屏滚动插件
注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
- 基于jQuery全屏相册插件zoomVisualizer
基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览 ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
随机推荐
- jQuery的zTree插件
写在前面 jQuery的 zTree插件 关键代码 <%@ page language="java" contentType="text/html; charset ...
- 【Swoole】计一次swoole_server配合laravel5启动报错:Address already in use[98]
[2019-11-11 11:42:25 @21371.0] WARNING swSocket_bind(:434): bind(0.0.0.0:9501) failed, Error: Addre ...
- eclispe: 修改所有文件默认编码为UTF-8
1.修改 workspace text file encoding 依次点击windows -> Preferences -> general -> Workspace,修改如图的编 ...
- Nginx warn:an upstream response is buffered to a temporary file
我通过nginx下载文件,error.log中出现如下警告日志:warn:an upstream response is buffered to a temporary file . 虽然网上各种例 ...
- mark_Linux_wc
Linux wc命令 Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准 ...
- Consider defining a bean of type 'com.*.*.mapper.*.*Mapper' in your configuration.
@Mapper 不能加载的问题 Consider defining a bean of type 'com.*.*.mapper.*.*Mapper' in your configuration. 添 ...
- IDEA @override处标红
报错问题如下 这个是没有导入父类,无法重写父类的方法 创建项目的时候没有使用jdk1.6以上的版本.将版本更正就好了
- C++ RAII 与 ScopeGuard
C++ RAII 与 ScopeGuard RAII机制 RAII(Resource Acquisition Is Initialization),也就是“资源获取就是初始化”,是C++语言的一种管理 ...
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用过程中问题的自我排查-设备不在线问题自我排查检测
由于EasyNVR的受众越来越多,时常会遇到很多类似的问题咨询,之前虽然有写过很多的博文进行技术的或者使用问题的解答,随着客户询问的增多,我发现,要想让客户了解问题和解决问题,往往引导和给一个思路比直 ...
- 神器之strace
原链接:https://www.jianshu.com/p/33521124bdf2来