jquery.mloading.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /* Author:mingyuhisoft@163.com
  2. * Github:https://github.com/imingyu/jquery.mloading
  3. * Npm:npm install jquery.mloading.js
  4. * Date:2016-7-4
  5. */
  6. ;(function (root, factory) {
  7. 'use strict';
  8. if (typeof module === 'object' && typeof module.exports === 'object') {
  9. factory(require('jquery'),root);
  10. } if(typeof define ==="function"){
  11. if(define.cmd){
  12. define(function(require, exports, module){
  13. var $ = require("jquery");
  14. factory($,root);
  15. });
  16. }else{
  17. define(["jquery"],function($){
  18. factory($,root);
  19. });
  20. }
  21. }else {
  22. factory(root.jQuery,root);
  23. }
  24. } (typeof window !=="undefined" ? window : this, function ($, root, undefined) {
  25. 'use strict';
  26. if(!$){
  27. $ = root.jQuery || null;
  28. }
  29. if(!$){
  30. throw new TypeError("必须引入jquery库方可正常使用!");
  31. }
  32. var arraySlice = Array.prototype.slice,
  33. comparison=function (obj1,obj2) {
  34. var result=true;
  35. for(var pro in obj1){
  36. if(obj1[pro] !== obj2[obj1]){
  37. result=true;
  38. break;
  39. }
  40. }
  41. return result;
  42. }
  43. function MLoading(dom,options) {
  44. options=options||{};
  45. this.dom=dom;
  46. this.options=$.extend(true,{},MLoading.defaultOptions,options);
  47. this.curtain=null;
  48. this.render().show();
  49. }
  50. MLoading.prototype={
  51. constructor:MLoading,
  52. initElement:function () {
  53. var dom=this.dom,
  54. ops=this.options;
  55. var curtainElement=dom.children(".mloading"),
  56. bodyElement = curtainElement.children('.mloading-body'),
  57. barElement = bodyElement.children('.mloading-bar'),
  58. iconElement = barElement.children('.mloading-icon'),
  59. textElement = barElement.find(".mloading-text");
  60. if (curtainElement.length == 0) {
  61. curtainElement = $('<div class="mloading"></div>');
  62. dom.append(curtainElement);
  63. }
  64. if (bodyElement.length == 0) {
  65. bodyElement = $('<div class="mloading-body"></div>');
  66. curtainElement.append(bodyElement);
  67. }
  68. if (barElement.length == 0) {
  69. barElement = $('<div class="mloading-bar"></div>');
  70. bodyElement.append(barElement);
  71. }
  72. if (iconElement.length == 0) {
  73. var _iconElement=document.createElement(ops.iconTag);
  74. iconElement = $(_iconElement);
  75. iconElement.addClass("mloading-icon");
  76. barElement.append(iconElement);
  77. }
  78. if (textElement.length == 0) {
  79. textElement = $('<span class="mloading-text"></span>');
  80. barElement.append(textElement);
  81. }
  82. this.curtainElement=curtainElement;
  83. this.bodyElement = bodyElement;
  84. this.barElement = barElement;
  85. this.iconElement = iconElement;
  86. this.textElement = textElement;
  87. return this;
  88. },
  89. render:function () {
  90. var dom=this.dom,
  91. ops=this.options;
  92. this.initElement();
  93. if(dom.is("html") || dom.is("body")){
  94. this.curtainElement.addClass("mloading-full");
  95. }else{
  96. this.curtainElement.removeClass("mloading-full");
  97. if(!dom.hasClass("mloading-container")){
  98. dom.addClass("mloading-container");
  99. }
  100. }
  101. if(ops.mask){
  102. this.curtainElement.addClass("mloading-mask");
  103. }else{
  104. this.curtainElement.removeClass("mloading-mask");
  105. }
  106. if(ops.content!="" && typeof ops.content!="undefined"){
  107. if(ops.html){
  108. this.bodyElement.html(ops.content);
  109. }else{
  110. this.bodyElement.text(ops.content);
  111. }
  112. }else{
  113. this.iconElement.attr("src",ops.icon);
  114. if(ops.html){
  115. this.textElement.html(ops.text);
  116. }else{
  117. this.textElement.text(ops.text);
  118. }
  119. }
  120. return this;
  121. },
  122. setOptions:function (options) {
  123. options=options||{};
  124. var oldOptions = this.options;
  125. this.options = $.extend(true,{},this.options,options);
  126. if(!comparison(oldOptions,this.options)) this.render();
  127. },
  128. show:function () {
  129. var dom=this.dom,
  130. ops=this.options,
  131. barElement=this.barElement;
  132. this.curtainElement.addClass("active");
  133. barElement.css({
  134. "marginTop":"-"+barElement.outerHeight()/2+"px",
  135. "marginLeft":"-"+barElement.outerWidth()/2+"px"
  136. });
  137. return this;
  138. },
  139. hide:function () {
  140. var dom=this.dom,
  141. ops=this.options;
  142. this.curtainElement.removeClass("active");
  143. if(!dom.is("html") && !dom.is("body")){
  144. dom.removeClass("mloading-container");
  145. }
  146. return this;
  147. },
  148. destroy:function () {
  149. var dom=this.dom,
  150. ops=this.options;
  151. this.curtainElement.remove();
  152. if(!dom.is("html") && !dom.is("body")){
  153. dom.removeClass("mloading-container");
  154. }
  155. dom.removeData(MLoading.dataKey);
  156. return this;
  157. }
  158. };
  159. MLoading.dataKey="MLoading";
  160. MLoading.defaultOptions = {
  161. text:"加载中...",
  162. iconTag:"img",
  163. icon:"data:image/gif;base64,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",
  164. html:false,
  165. content:"",//设置content后,text和icon设置将无效
  166. mask:true//是否显示遮罩(半透明背景)
  167. };
  168. $.fn.mLoading=function (options) {
  169. var ops={},
  170. funName="",
  171. funArgs=[];
  172. if(typeof options==="object"){
  173. ops = options;
  174. }else if(typeof options ==="string"){
  175. funName=options;
  176. funArgs = arraySlice.call(arguments).splice(0,1);
  177. }
  178. return this.each(function (i,element) {
  179. var dom = $(element),
  180. plsInc=dom.data(MLoading.dataKey);
  181. if(!plsInc){
  182. plsInc=new MLoading(dom,ops);
  183. }
  184. if(funName){
  185. var fun = plsInc[funName];
  186. if(typeof fun==="function"){
  187. fun.apply(plsInc,funArgs);
  188. }
  189. }
  190. });
  191. }
  192. }));