13518219792

JQuery+Bootstrap如何自定义全屏Loading插件

这篇文章主要为大家展示了“JQuery+Bootstrap如何自定义全屏Loading插件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JQuery+Bootstrap如何自定义全屏Loading插件”这篇文章吧。

创新互联建站是专业的庆云网站建设公司，庆云接单;提供做网站、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行庆云网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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 = '

@@KZ_Loading_Text@@

'; 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();

ps：下面看下基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%>

  　　
  　　　　
  　　　　　　
  　　　　
  　　　　loading...
  　　

<%--loading方法--%>

  var loadingTime= 5;//默认遮罩时间
  showLoading = function (loadText) {
    if(!loadText){
      $("#loadText").html(loadText)
    }
    $('#loadingModal').modal({backdrop: 'static', keyboard: false});
  }
  hideLoading = function () {
    $('#loadingModal').modal('hide');
  }

以上是“JQuery+Bootstrap如何自定义全屏Loading插件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页标题：JQuery+Bootstrap如何自定义全屏Loading插件
网页网址：http://cdweb.net/article/ijcosj.html

其他资讯