经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery+Bootstrap 自定义全屏Loading插件
来源:cnblogs  作者:恋禾梦颖  时间:2019/7/3 8:54:20  对本文有异议
  1. 1 /**
  2. 2 * 自定义Loading插件
  3. 3 * @param {Object} config
  4. 4 * {
  5. 5 * content[加载显示文本],
  6. 6 * time[自动关闭等待时间(ms)]
  7. 7 * }
  8. 8 * @param {String} config
  9. 9 * 加载显示文本
  10. 10 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
  11. 11 * @return {KZ_Loading} 对象实例
  12. 12 */
  13. 13 function KZ_Loading(config) {
  14. 14 if (this instanceof KZ_Loading) {
  15. 15 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>';
  16. 16 this.config = {
  17. 17 content: 'loading...',
  18. 18 time: 0,
  19. 19 };
  20. 20 if (config != null) {
  21. 21 if (typeof config === 'string') {
  22. 22 this.config = Object.assign(this.config, {
  23. 23 content: config
  24. 24 });
  25. 25 } else if (typeof config === 'object') {
  26. 26 this.config = Object.assign(this.config, config);
  27. 27 }
  28. 28 }
  29. 29 this.id = new Date().getTime().toString();
  30. 30 this.state = 'hide';
  31. 31
  32. 32 /*显示 */
  33. 33 this.show = function () {
  34. 34 $('.kz-loading[data-kzid=' + this.id + ']').modal({
  35. 35 backdrop: 'static',
  36. 36 keyboard: false
  37. 37 });
  38. 38 this.state = 'show';
  39. 39 if (this.config.time > 0) {
  40. 40 var that = this;
  41. 41 setTimeout(function () {
  42. 42 that.hide();
  43. 43 }, this.config.time);
  44. 44 }
  45. 45 };
  46. 46 /*隐藏 */
  47. 47 this.hide = function (callback) {
  48. 48 $('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
  49. 49 this.state = 'hide';
  50. 50 if (callback) {
  51. 51 callback();
  52. 52 }
  53. 53 };
  54. 54 /*销毁dom */
  55. 55 this.destroy = function () {
  56. 56 var that = this;
  57. 57 this.hide(function () {
  58. 58 var node = $('.kz-loading[data-kzid=' + that.id + ']');
  59. 59 node.next().remove();
  60. 60 node.remove();
  61. 61 that.show = function () {
  62. 62 throw new Error('对象已销毁!');
  63. 63 };
  64. 64 that.hide = function () {};
  65. 65 that.destroy = function () {};
  66. 66 });
  67. 67 }
  68. 68
  69. 69 var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content);
  70. 70 $('body').append(domHtml);
  71. 71 } else {
  72. 72 return new KZ_Loading(config);
  73. 73 }
  74. 74 }

基本调用:

  1. 1 var loading = new KZ_Loading('数据加载中。。。');
  2. 2 setTimeout(function () {
  3. 3 console.log('加载完成!');
  4. 4 loading.hide();
  5. 5 }, 1000);

自动关闭:

  1. 1 var loading = new KZ_Loading({
  2. 2 content: '数据加载中。。。',
  3. 3 time: 2000
  4. 4 });
  5. 5 loading.show();

销毁Loading Dom节点:

  1. 1 loading.destroy();

 

原文链接:http://www.cnblogs.com/xinxin-csharp/p/11122438.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号