better-staridc-MNBT
1;(function(){
2 $.fn.lyearloading = function(options) {
3
4 // DOM容器对象
5 var $this = $(this);
6
7 var defaults = {
8 eleObj : null,
9 opacity : 0.1, // 遮罩层的透明度，==0时没有遮罩层
10 backgroundColor : '#000000', // 遮罩层的颜色
11 imgUrl : '', // 加载动画使用图片
12 textColorClass : '', // 定义文字的颜色，当不使用图片时
13 spinnerColorClass : '', // 定义加载动画的颜色，当不使用图片时
14 spinnerSize : 'normal', // 定义加载动画的大小，当不使用图片时
15 spinnerText : '', // 显示的文字
16 zindex : 9999, // 遮罩层的z-index值
17 };
18
19 // 融合配置项
20 var opts = $.extend({}, defaults, options);
21
22 // 如果没有当前对象，这适用参数中的，两者都没有，提示报错并退出
23 if ($this.length == 0 && opts.eleObj != null) {
24 $this = opts.eleObj;
25 }
26
27 if ($this.length == 0) {
28 console.error('未获取到对象');
29 return false;
30 }
31
32 // 默认样式
33 var maskStyle = {
34 'position' : 'absolute',
35 'width' : '100%',
36 'height' : '100%',
37 'top' : 0,
38 'left' : 0,
39 'background-color' : opts.backgroundColor,
40 'opacity' : opts.opacity,
41 'z-index' : opts.zindex,
42
43 }, textStyle = {
44 'position' : 'absolute',
45 'line-height' : '120%',
46 'text-align' : 'center',
47 'vertical-align' : 'middle',
48 'z-index' : opts.zindex + 1,
49 }, spinnerStyle = {
50 'position' : 'absolute',
51 'z-index' : opts.zindex + 1,
52 };
53
54 var defaultClass = 'lyear-loading';
55
56 // 初始化方法
57 this.init = function(){
58 if ($this.children('.' + defaultClass).length > 0) {
59 $this.children('.' + defaultClass).fadeIn(250)
60 } else {
61 var $maskHtml = $('<div />').addClass(defaultClass),
62 $textHtml = $('<span />').html($.trim(opts.spinnerText)).addClass(defaultClass).addClass(opts.textColorClass),
63 $spinnerHtml = opts.imgUrl ? $('<img />').attr('src', opts.imgUrl).addClass(defaultClass) : $('<div />').addClass('spinner-border').addClass(defaultClass).addClass(opts.spinnerColorClass).css(this.getSpinnerSize());
64
65 var toolMethods = {
66 resizeStyle: function() {
67 var $parent = $this.find('.' + defaultClass).parent(),
68 parentPosition = ('fixed,relative').indexOf($parent.css('position')),
69 isFixed = parentPosition > -1 || $parent[0] === $('.' + defaultClass)[0].offsetParent,
70 offsetP = isFixed ? { top: 0, left: 0 } : { top: $parent[0].offsetTop, left: $parent[0].offsetLeft },
71 parentW = $this.outerWidth(),
72 parentH = $this.outerHeight();
73
74 //if ($this.selector == 'body') { // jquery 2.*版本
75 if ($this[0].localName == 'body') {
76 maskStyle.position = 'fixed';
77 spinnerStyle.position = 'fixed';
78 textStyle.position = 'fixed';
79
80 spinnerStyle.top = $(window).height() / 2 - $spinnerHtml.outerHeight() / 2 + (opts.spinnerText ? (- 4 - $textHtml.height() / 2) : 0);
81 spinnerStyle.left = $(window).width() / 2 - $spinnerHtml.outerWidth() / 2;
82
83 textStyle.top = $(window).height() / 2 + $spinnerHtml.outerHeight() / 2 - 4;
84 textStyle.left = $(window).width() / 2 - $textHtml.outerWidth() / 2;
85 } else {
86 maskStyle.width = parentW;
87 maskStyle.height = parentH;
88 maskStyle.top = offsetP.top;
89 maskStyle.left = offsetP.left;
90
91 spinnerStyle.top = parentH / 2 - $spinnerHtml.outerHeight() / 2 + (opts.spinnerText ? (- 4 - $textHtml.height() / 2) : 0) + offsetP.top;
92 spinnerStyle.left = parentW / 2 - $spinnerHtml.outerWidth() / 2 + offsetP.left;
93
94 textStyle.top = parentH / 2 + $spinnerHtml.outerHeight() / 2 - 4 + offsetP.top;
95 textStyle.left = parentW / 2 - $textHtml.width() / 2 + offsetP.left;
96 }
97
98 $maskHtml.css(maskStyle);
99 $spinnerHtml.css(spinnerStyle);
100 $textHtml.css(textStyle);
101 }
102 };
103
104 // 遮罩层继承父元素的边框效果
105 maskStyle['border-top-left-radius'] = $this.css('border-top-left-radius');
106 maskStyle['border-top-right-radius'] = $this.css('border-top-right-radius');
107 maskStyle['border-bottom-left-radius'] = $this.css('border-bottom-left-radius');
108 maskStyle['border-bottom-right-radius'] = $this.css('border-bottom-right-radius');
109
110 opts.opacity && $maskHtml.css(maskStyle).appendTo($this);
111 $.trim(opts.spinnerText) && $textHtml.css(textStyle).appendTo($this);
112 $spinnerHtml.css(spinnerStyle).appendTo($this);
113
114 this.loadImage(opts.imgUrl, function (imgObj) {
115 toolMethods.resizeStyle();
116 }, function(e){
117 throw new Error(e);
118 });
119
120 $(window).off('resize.' + defaultClass).on('resize.' + defaultClass, function () {
121 toolMethods.resizeStyle();
122 });
123 }
124 }
125
126 this.hide = function(){
127 $this.children('.' + defaultClass).fadeOut(250);
128 }
129
130 this.show = function(){
131 $this.children('.' + defaultClass).fadeIn(250);
132 }
133
134 this.destroy = function() {
135 $this.children('.' + defaultClass).fadeOut(250, function() {
136 $(window).off('resize.' + defaultClass);
137 $(this).remove();
138 });
139 }
140
141 this.loadImage = function (url, callback, error) {
142 if (!url) {
143 return callback();
144 }
145
146 var imgObj;
147
148 imgObj = new Image();
149 imgObj.src = url;
150
151 if (imgObj.complete && callback) {
152 return callback();
153 }
154
155 imgObj.onload = function () {
156 imgObj.onload = null;
157 callback && callback();
158 };
159
160 imgObj.onerror = function (e) {
161 imgObj.onerror = null;
162 error && error(e);
163 };
164
165 return imgObj;
166 }
167
168 // 对loading设置大小的处理返回
169 this.getSpinnerSize = function() {
170 var sizeCss;
171 switch (options.spinnerSize) {
172 case 'sm' :
173 sizeCss = {'width': '12px', 'height' : '12px'};
174 break;
175 case 'nm' :
176 sizeCss = {'width': '24px', 'height' : '24px'};
177 break;
178 case 'md' :
179 sizeCss = {'width': '36px', 'height' : '36px'};
180 break;
181 case 'lg' :
182 sizeCss = {'width': '48px', 'height' : '48px'};
183 break;
184 default :
185 sizeCss = {'width': options.spinnerSize, 'height': options.spinnerSize};
186 }
187
188 return sizeCss;
189 };
190
191 // 自动执行初始化函数
192 this.init();
193
194 // 返回函数对象
195 return this;
196 }
197})(jQuery);