一个progressbar widget
这个widget是包含在wijmo 项目中的一个widget。目前此widget已经开源基于mit和gpl双协议，目前是beta版，可能存在bug。此项目的demo网站http://wijmo.com/Wijmo-Open/samples/
1 /*
2 * wijprogressbar Widget. V1.0
3 *
4 * Copyright (c) Componentone Inc.
5 *
6 * Depends:
7 * Jquery-1.4.2.js
8 * jquery.ui.core.js
9 * jquery.ui.widget.js
10 *
11 *Optional dependence for effect settings:
12 * jquery.effects.core.js
13 * jquery.effects.blind.js
14 * jquery.effects.bounce.js
15 * jquery.effects.clip.js
16 * jquery.effects.drop.js
17 * jquery.effects.explode.js
18 * jquery.effects.fold.js
19 * jquery.effects.hightlight.js
20 * jquery.effects.pulsate.js
21 * jquery.effects.scale.js
22 * jquery.effects.shake.js
23 * jquery.effects.slide.js
24 * jquery.effects.transfer.js
25 * HTML:
26 * <div id="progressbar" style="width:***;height:***"></div>
27 */
28 (function ($) {
29 $.widget("ui.wijprogressbar", $.ui.progressbar, {
30 options: {
31 /// <summary>
32 ///The label's alignment on the progress bar. The value should be "east", "west", "center", "north", "south" or "running".
33 ///Default:"center".
34 ///Type:String.
35 ///Code sample:$('.selector').wijprogressbar('option','labelAlign','center').
36 ///</summary>
37 labelAlign: "center",
38 /// <summary>
39 ///The value of the progress bar,the type should be numeric.
40 ///Default:0.
41 ///Type:Number.
42 ///Code sample:$('.selector').wijprogressbar('option','value',60).
43 ///</summary>
44 maxValue: 100,
45 /// <summary>
46 ///The minimum value of the progress bar,the type should be numeric.
47 ///Default:0.
48 ///Type:Number.
49 ///Code sample:$('.selector').wijprogressbar('option','minValue',0).
50 ///</summary>
51 minValue: 0,
52 /// <summary>
53 ///The fill direction of the progress bar.the value should be "east", "west", "north" or "south".
54 ///Default:"east".
55 ///Type:String.
56 ///Code sample:$('.selector').wijprogressbar('option','fillDirection','east').
57 ///</summary>
58 fillDirection: "east",
59 /// <summary>
60 ///The progressbar's orientation.the value should be 'horizontal' or 'vertical'.
61 ///Default:"horizontal".
62 ///Type:String.
63 ///Code sample:$('selector').wijprogressbar('option','orientation','horizontal').
64 ///</summary>
65 ///orientation: "horizontal",
66 /// <summary>
67 ///Sets the format of the label text.The available formats are as follows:
68 ///{0} or {ProgressValue} express the current progress Value.
69 ///{1} or {PercentProgress} express the current percent of the progress bar.
70 ///{2} or {RemainingProgress} express the remaining progress of the progress bar.
71 ///{3} or {PercentageRemaining} express the remaining percent of the progress bar.
72 ///{4} or {Min} express the min Vlaue of the progress bar.
73 ///{5} or {Max} express the max Value of the progress bar.
74 ///Default:"{1}%".
75 ///Type:String.
76 ///Code sample:$('.selector').wijprogressbar('option','labelFormatString','{0}%').
77 ///</summary>
78 labelFormatString: "{1}%",
79 /// <summary>
80 ///Set the format of the ToolTip of the progress bar,the expression of the format like the labelFormatString.
81 ///Default:"{1}%".
82 ///Type:String.
83 ///Code sample:$('.selector').wijprogressbar('option','toolTipFormatString','{1}%').
84 ///</summary>
85 toolTipFormatString: "{1}%",
86 /// <summary>
87 ///The increment of the progress bar's indicator.
88 ///Default:1.
89 ///Type:Number.
90 ///</summary>
91 ///Code sample:$('.selector').wijprogressbar('option','indicatorIncrement',10).
92 indicatorIncrement: 1,
93 /// <summary>
94 ///The Image's url of the indicator.
95 ///Default:"".
96 ///Type:String.
97 ///Code sample:$('.selector').wijprogressbar('option','indicatorImage','images/abc.png').
98 ///</summary>
99 indicatorImage: "",
100 /// <summary>
101 ///The delay of the progressbar's animation.
102 ///Default:0.
103 ///Type:Number.
104 ///Code sample:$('.selector').wijprogressbar('option',
105 ///</summary>
106 animationDelay: 0,
107 /// <summary>
108 ///The options parameter of the jQuery's animation.
109 ///Default:"{animated:'progress',duration:500}".
110 ///Type:Options.
111 ///Code sample:$('.selector').wijprogressbar('option','animationOptions',{animated:'progress',duration:600}).
112 ///</summary>
113 animationOptions: {
114 animated: 'progress',
115 duration: 500
116 }
117 },
118 //when set the options, trigger this method.
119 _setOption: function (key, value) {
120 var val, self = this;
121 switch (key) {
122 case "value":
123 val = parseInt(value);
124 self.options[key] = val;
125 self._refreshValue(val);
126 break;
127 case "maxValue":
128 case "minValue":
129 val = parseInt(value);
130 self.options[key] = val;
131 self[key === "maxValue" ? "max" : "min"] = val;
132 self._refreshValue();
133 break;
134 case "labelFormatString":
135 case "toolTipFormatString":
136 self.options[key] = value;
137 self._refreshValue();
138 //$.Widget.prototype._setOption.apply(this, arguments);
139 break;
140 case "orientation":
141 case "fillDirection":
142 case "labelAlign":
143 case "indicatorImage":
144 self.options[key] = value;
145 self._initElements();
146 self._refreshValue();
147 //$.Widget.prototype._setOption.apply(this, arguments);
148 break;
149 case "indicatorIncrement":
150 value = (value == 0 ? 1 : value);
151 self.options[key] = value;
152 self._initElements();
153 self._refreshValue();
154 break;
155 default: break;
156 }
157 $.Widget.prototype._setOption.apply(self, arguments);
158 },
159 ///create the widget
160 _create: function () {
161 var self = this;
162 self.min = self.options.minValue;
163 self.max = self.options.maxValue;
164 self.element.addClass("ui-wijprogressbar");
165 $.ui.progressbar.prototype._create.apply(self, arguments);
166 self.label = $("<span>").addClass("ui-progressbar-label ui-corner-left").appendTo(self.valueDiv);
167 self._initElements();
168 self._isInit = true;
169 self._refreshValue();
170 },
171 ///Trigger the pressbar event.
172 _triggerEvent: function (eventName, oldValue, newValue, cancel) {
173 var ea = $.Event(eventName);
174 ea.data = {
175 oldValue: oldValue,
176 newValue: newValue,
177 cancel: cancel
178 };
179 this._trigger(eventName, ea);
180 return ea.data.cancel;
181 },
182 //refresh the progress value.
183 _refreshValue: function () {
184 var self = this;
185 if (!self._isInit) {
186 return;
187 }
188 var value = self.value();
189 var percent = (value - self.min) / (self.max - self.min) * 100;
190 var o = self.options;
191
192 var cancel = self._triggerEvent("beforeProgressChanging", self.element.attr("aria-valuenow"), value, false);
193 if (cancel) {
194 return;
195 }
196 self.valueDiv.css({
197 width: "",
198 height: ""
199 });// If have animation.
200 if (o.animationOptions.animated && o.animationOptions.duration > 0) {
201 setTimeout($.proxy(function () {
202 var o = self.options.animationOptions;
203 var animateOptions = {
204 content: self.valueDiv,
205 complete: $.proxy(function () {
206 self._triggerEvent("progressChanged", self.element.attr("aria-valuenow"), value, false);
207 }, self),
208 step: $.proxy(function (ovalue) {
209 self._performAnimating(ovalue);
210 }, self),
211 processValue: percent
212 }
213 var animations = $.ui.wijprogressbar.animations;
214 var duration = o.duration;
215 var easing = o.animated;
216 if (easing && !animations[easing]) {
217 easing = "progress";
218 }
219 if (!animations[easing]) {
220 animations[easing] = function (options) {
221 this.progress(options, {
222 easing: easing,
223 duration: duration || 1000
224 });
225 }
226 }
227 animations[easing](animateOptions, self.options.animationOptions);
228
229 }, self), o.animationDelay);
230 }
231 else {
232 //trigger the progressChanged event.
233 var oldValue = self.element.attr("aria-valuenow");
234 self._refreshProgress(percent);
235 self._triggerEvent("progressChanged", oldValue, value, false);
236 }
237 },///Set the label's position of the progress bar.
238 _setLabelSide: function () {
239 var self = this;
240 var fillDirection = self.options.fillDirection;
241 var labelAlign = self.options.labelAlign;
242 if (self._isHorizontal()) {
243 if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") {
244 self.label.css("width", self.element.width() + 'px');
245 }
246 else
247 if (labelAlign === "running") {
248 self.label.css("width", "auto");
249 }
250 else {
251 self.element.css("line-height", "normal");
252 self.valueDiv.css("line-height", "normal");
253 self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto");
254 }
255 }
256 else {
257 if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") {
258 self.label.css({ "line-height": self.element.height() + 'px', "width": self.element.width() + 'px' });
259 }
260 else
261 if (labelAlign === "running") {
262 self.label.css({ "height": "auto", "width": self.element.width() + 'px' });
263 }
264 else {
265 self.element.css("line-height", "normal");
266 self.valueDiv.css("line-height", "normal");
267 self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto");
268 }
269 }
270 },///get the progress bar's progress orientation.
271 _isHorizontal: function () {
272 return this.options.fillDirection === "west" || this.options.fillDirection === "east";
273 },
274 ///start the progress
275 startTask: function () {
276 /// <summary>Start the progress</summary>
277 if ($(":animated", this.element).length == 0) {
278 var value = this.value();
279 this._refreshValue(value);
280 }
281 },///stop the progress
282 stopTask: function () {
283 /// <summary>Stop the progress</summary>
284 this.valueDiv.stop();
285 },//init the progress bar
286 _initElements: function () {
287 var self = this;
288 var o = self.options;
289 self.element.removeClass("ui-wijprogressbar-west ui-wijprogressbar-east ui-wijprogressbar-north ui-wijprogressbar-south").addClass("ui-wijprogressbar-" + o.fillDirection);
290 var height = self.element.height();
291 self.valueDiv.css("line-height", "");
292 self.label.removeClass("lb_west lb_east lb_south lb_north lb_center lb_running").addClass("lb_" + o.labelAlign)
293 .css("line-height", "").css({
294 left: "",
295 right: "",
296 top: "",
297 bottom: ""
298 });
299 if (self._isHorizontal()) {
300 self.valueDiv.height(height)
301 .css("line-height", height + "px");
302 }
303 else {
304 self.valueDiv.width(self.element.width());
305 }
306 self._setLabelSide();
307 if (self.options.indicatorImage !== "") {
308 self.valueDiv.css("background", "transparent url(" + self.options.indicatorImage + ") repeat fixed");
309 }
310 },
311 ///refresh the progress
312 _refreshProgress: function (value) {
313 var self = this;
314 var ea = new $.Event('progressChanging');
315 var nowValue = value * (self.max - self.min) / 100 + self.min;
316 var o = self.options;
317 var cancel = self._triggerEvent("progressChanging", self.element.attr("aria-valuenow"), nowValue, false);
318 if (cancel) {
319 return;
320 }
321 if (self._isHorizontal()) {
322 self.valueDiv.toggleClass(o.fillDirection === "east" ? "ui-corner-right" : "ui-corner-left", value === self.max).width(value + "%");
323 }
324 else {
325 self.valueDiv.toggleClass(o.fillDirection === "south" ? "ui-corner-bottom" : "ui-corner-top", value === self.max).height(value + "%");
326 }
327 self.element.attr("aria-valuenow", nowValue);
328 var txt = self._getFormatString(o.labelFormatString, value);
329 self._setLabelsText(txt);
330 var _tooTip = self._getFormatString(o.toolTipFormatString, value);
331 self.element.attr("title", _tooTip);
332 },
333 ///play progress animation.
334 _performAnimating: function (obj) {
335 var self = this;
336 var len = Math.floor(obj / self.options.indicatorIncrement);
337 obj = len * self.options.indicatorIncrement;
338 var o = self.options;
339 self._refreshProgress(obj);
340
341 if (o.labelAlign === "running") {
342 if (self._isHorizontal()) {
343 var eleWidth = self.element.width();
344 var labelWidth = self.label.outerWidth();
345 var progressWidth = self.valueDiv.outerWidth();
346 var left = eleWidth === progressWidth ? eleWidth - labelWidth : obj * eleWidth / 100 - labelWidth + labelWidth * (eleWidth - progressWidth) / eleWidth;
347 self.label.css(o.fillDirection === "east" ? "left" : "right", left);
348 }
349 else {
350 var eleHeight = self.element.height();
351 var labelHeight = self.label.outerHeight();
352 var progressHeight = self.valueDiv.outerHeight();
353 var top = eleHeight === progressHeight ? eleHeight - labelHeight : obj * eleHeight / 100 - labelHeight + labelHeight * (eleHeight - progressHeight) / eleHeight;
354 self.label.css(o.fillDirection === "south" ? "top" : "bottom", top);
355 }
356 }
357 },//set the label'text
358 _setLabelsText: function (text) {
359 if (!this._isHorizontal() && this.options.labelAlign === "rightOrBottom") {
360 this.label.html('<span style=\'position:absolute;bottom:0px;text-align:center;width:' + this.element.width() + 'px;\'>' + text + '</span>');
361 return;
362 }
363
364 this.label.html(text);
365 },//format the text
366 _getFormatString: function (format, val) {
367 var self = this;
368 var processValue = parseInt(self.element.attr("aria-valuenow"));
369 var remainingProcess = self.max - processValue
370 var percentProgress = val;
371 var percentageRemaining = 100 - val;
372 var r = /\{0\}/g;
373 format = format.replace(r, processValue.toString());
374 r = /\{ProgressValue\}/g;
375 format = format.replace(r, processValue.toString());
376 r = /\{1\}/g;
377 format = format.replace(r, percentProgress.toString());
378 r = /\{PercentProgress\}/g;
379 format = format.replace(r, percentProgress.toString());
380 r = /\{2\}/g;
381 format = format.replace(r, remainingProcess.toString());
382 r = /\{RemainingProgress\}/g;
383 format = format.replace(r, remainingProcess.toString());
384 r = /\{3\}/g;
385 format = format.replace(r, percentageRemaining.toString());
386 r = /\{PercentageRemaining\}/g;
387 format = format.replace(r, percentageRemaining.toString());
388 r = /\{4\}/g;
389 format = format.replace(r, self.min);
390 r = /\{Min\}/g;
391 format = format.replace(r, self.min);
392 r = /\{5\}/g;
393 format = format.replace(r, self.max);
394 r = /\{Max\}/g;
395 format = format.replace(r, self.max);
396 return format;
397 },///destroy the widget.
398 destroy: function () {
399 this.element.empty();
400 this.element.removeClass("ui-wijprogressbar ui-widget ui-widget-content ui-corner-all ui-wijprogressbar-h").removeAttr("title");
401 $.Widget.prototype.destroy.apply(this, arguments);
402 }
403 });
404 ///progress bar animation. If user want to write custom animation,can override the animations option.And set the animated to the options key.
405 $.extend($.ui.wijprogressbar, {
406 animations: {
407 progress: function (options, additions) {
408 options = $.extend({
409 easing: "swing",
410 duration: 1000
411 }, options, additions);
412 options.content.stop(true, true).animate({
413 widthvalue: options.processValue
414 }, options);
415 }
416 }
417 });
418 })(jQuery);
419
