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 先验货 插件代码可以在这里找到. 注意,虽然是 ...
随机推荐
- C#-关于TcpListener的AcceptTcpClient()方法造成线程阻塞,进而程序无法彻底关闭的问题
https://blog.csdn.net/nuistchn/article/details/50809158 在<C#高级编程>第7版第24章,有提到使用TCP类. 书中写了一个实例,两 ...
- easyui datagrid生成序号列formatter
var opts1; $('#datagrid_1').datagrid({ columns: [ [{ field: 'myNo', title: '序号', align: 'center', wi ...
- Nginx返回固定json或者文本格式的方法
在系统还没有做集群的情况下,直接重启项目时刚好用户在使用的话,一般都会受到投诉,那么使用nginx返回类似“系统维护”的提示信息并且提前在应用上面做通知才是合适的做法 那么记录一下nginx里面的配置 ...
- react 核心技术点
1.react生命周期 react生命周期分为初始化阶段.运行阶段.销毁阶段. (1) 初始化阶段: componentWillMount:实例挂载之前 Render:渲染组件 componentDi ...
- 爬虫框架Scrapy的安装
Scrapy框架官方网址:http://doc.scrapy.org/en/latest Scrapy中文维护站点:http://scrapy-chs.readthedocs.io/zh_CN/lat ...
- invalid argument (errno: 22)
socket通信示例中,当accept客户端时,经常报这个错误. 并且是第一次没有问题,第二次或后面几次都会出现如下问题, 错误码为22, 错误描述为invalid argument. 问题解决如下: ...
- [ERROR] ionic-app-scripts has unexpectedly closed (exit code 1).
这个错误是因为缺失 '@ionic/app-scripts',只要安装 '@ionic/app-scripts' 即可. 解决方法:npm install @ionic/app-scripts@lat ...
- maven安装和应用
maven安装和应用 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://www.cnblogs.com/xihehua/p/9639045.html https://w ...
- 对Dev的GridControl/GridView控件进行分组并展开操作
今天在模块编写中碰到了对表格的分组,特意在这里把它记录下来. 一.背景:Dev14.1.3,GridControl,.NET4.0+C# 二.过程 1.GridControl设计 一共添加4列:在下面 ...
- React 简介