这个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 > });// 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