此項目的demo網站http://wijmo.com/Wijmo-Open/samples/
代碼如下:
/*
* wijprogressbar Widget. V1.0
*
* Copyright (c) Componentone Inc.
*
* Depends:
* Jquery-1.4.2.js
* jquery.ui.core.js
* jquery.ui.widget.js
*
*Optional dependence for effect settings:
* jquery.effects.core.js
* jquery.effects.blind.js
* jquery.effects.bounce.js
* jquery.effects.clip.js
* jquery.effects.drop.js
* jquery.effects.explode.js
* jquery.effects.fold.js
* jquery.effects.hightlight.js
* jquery.effects.pulsate.js
* jquery.effects.scale.js
* jquery.effects.shake.js
* jquery.effects.slide.js
* jquery.effects.transfer.js
* HTML:
* <div id="progressbar" style="width:***;height:***"></div>
*/
(function ($) {
$.widget("ui.wijprogressbar", $.ui.progressbar, {
options: {
/// <summary>
///The label's alignment on the progress bar. The value should be "east", "west", "center", "north", "south" or "running".
///Default:"center".
///Type:String.
///Code sample:$('.selector').wijprogressbar('option','labelAlign','center').
///</summary>
labelAlign: "center",
/// <summary>
///The value of the progress bar,the type should be numeric.
///Default:0.
///Type:Number.
///Code sample:$('.selector').wijprogressbar('option','value',60).
///</summary>
maxValue: 100,
/// <summary>
///The minimum value of the progress bar,the type should be numeric.
///Default:0.
///Type:Number.
///Code sample:$('.selector').wijprogressbar('option','minValue',0).
///</summary>
minValue: 0,
/// <summary>
///The fill direction of the progress bar.the value should be "east", "west", "north" or "south".
///Default:"east".
///Type:String.
///Code sample:$('.selector').wijprogressbar('option','fillDirection','east').
///</summary>
fillDirection: "east",
/// <summary>
///The progressbar's orientation.the value should be 'horizontal' or 'vertical'.
///Default:"horizontal".
///Type:String.
///Code sample:$('selector').wijprogressbar('option','orientation','horizontal').
///</summary>
///orientation: "horizontal",
/// <summary>
///Sets the format of the label text.The available formats are as follows:
///{0} or {ProgressValue} express the current progress Value.
///{1} or {PercentProgress} express the current percent of the progress bar.
///{2} or {RemainingProgress} express the remaining progress of the progress bar.
///{3} or {PercentageRemaining} express the remaining percent of the progress bar.
///{4} or {Min} express the min Vlaue of the progress bar.
///{5} or {Max} express the max Value of the progress bar.
///Default:"{1}%".
///Type:String.
///Code sample:$('.selector').wijprogressbar('option','labelFormatString','{0}%').
///</summary>
labelFormatString: "{1}%",
/// <summary>
///Set the format of the ToolTip of the progress bar,the expression of the format like the labelFormatString.
///Default:"{1}%".
///Type:String.
///Code sample:$('.selector').wijprogressbar('option','toolTipFormatString','{1}%').
///</summary>
toolTipFormatString: "{1}%",
/// <summary>
///The increment of the progress bar's indicator.
///Default:1.
///Type:Number.
///</summary>
///Code sample:$('.selector').wijprogressbar('option','indicatorIncrement',10).
indicatorIncrement: 1,
/// <summary>
///The Image's url of the indicator.
///Default:"".
///Type:String.
///Code sample:$('.selector').wijprogressbar('option','indicatorImage','images/abc.png').
///</summary>
indicatorImage: "",
/// <summary>
///The delay of the progressbar's animation.
///Default:0.
///Type:Number.
///Code sample:$('.selector').wijprogressbar('option',
///</summary>
animationDelay: 0,
/// <summary>
///The options parameter of the jQuery's animation.
///Default:"{animated:'progress',duration:500}".
///Type:Options.
///Code sample:$('.selector').wijprogressbar('option','animationOptions',{animated:'progress',duration:600}).
///</summary>
animationOptions: {
animated: 'progress',
duration: 500
}
},
//when set the options, trigger this method.
_setOption: function (key, value) {
var val, self = this;
switch (key) {
case "value":
val = parseInt(value);
self.options[key] = val;
self._refreshValue(val);
break;
case "maxValue":
case "minValue":
val = parseInt(value);
self.options[key] = val;
self[key === "maxValue" ? "max" : "min"] = val;
self._refreshValue();
break;
case "labelFormatString":
case "toolTipFormatString":
self.options[key] = value;
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, arguments);
break;
case "orientation":
case "fillDirection":
case "labelAlign":
case "indicatorImage":
self.options[key] = value;
self._initElements();
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, arguments);
break;
case "indicatorIncrement":
value = (value == 0 ? 1 : value);
self.options[key] = value;
self._initElements();
self._refreshValue();
break;
default: break;
}
$.Widget.prototype._setOption.apply(self, arguments);
},
///create the widget
_create: function () {
var self = this;
self.min = self.options.minValue;
self.max = self.options.maxValue;
self.element.addClass("ui-wijprogressbar");
$.ui.progressbar.prototype._create.apply(self, arguments);
self.label = $("<span>").addClass("ui-progressbar-label ui-corner-left").appendTo(self.valueDiv);
self._initElements();
self._isInit = true;
self._refreshValue();
},
///Trigger the pressbar event.
_triggerEvent: function (eventName, oldValue, newValue, cancel) {
var ea = $.Event(eventName);
ea.data = {
oldValue: oldValue,
newValue: newValue,
cancel: cancel
};
this._trigger(eventName, ea);
return ea.data.cancel;
},
//refresh the progress value.
_refreshValue: function () {
var self = this;
if (!self._isInit) {
return;
}
var value = self.value();
var percent = (value - self.min) / (self.max - self.min) * 100;
var o = self.options;
var cancel = self._triggerEvent("beforeProgressChanging", self.element.attr("aria-valuenow"), value, false);
if (cancel) {
return;
}
self.valueDiv.css({
width: "",
height: ""
});
// If have animation.
if (o.animationOptions.animated && o.animationOptions.duration > 0) {
setTimeout($.proxy(function () {
var o = self.options.animationOptions;
var animateOptions = {
content: self.valueDiv,
complete: $.proxy(function () {
self._triggerEvent("progressChanged", self.element.attr("aria-valuenow"), value, false);
}, self),
step: $.proxy(function (ovalue) {
self._performAnimating(ovalue);
}, self),
processValue: percent
}
var animations = $.ui.wijprogressbar.animations;
var duration = o.duration;
var easing = o.animated;
if (easing && !animations[easing]) {
easing = "progress";
}
if (!animations[easing]) {
animations[easing] = function (options) {
this.progress(options, {
easing: easing,
duration: duration || 1000
});
}
}
animations[easing](animateOptions, self.options.animationOptions);
}, self), o.animationDelay);
}
else {
//trigger the progressChanged event.
var oldValue = self.element.attr("aria-valuenow");
self._refreshProgress(percent);
self._triggerEvent("progressChanged", oldValue, value, false);
}
},
///Set the label's position of the progress bar.
_setLabelSide: function () {
var self = this;
var fillDirection = self.options.fillDirection;
var labelAlign = self.options.labelAlign;
if (self._isHorizontal()) {
if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") {
self.label.css("width", self.element.width() + 'px');
}
else
if (labelAlign === "running") {
self.label.css("width", "auto");
}
else {
self.element.css("line-height", "normal");
self.valueDiv.css("line-height", "normal");
self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto");
}
}
else {
if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") {
self.label.css({ "line-height": self.element.height() + 'px', "width": self.element.width() + 'px' });
}
else
if (labelAlign === "running") {
self.label.css({ "height": "auto", "width": self.element.width() + 'px' });
}
else {
self.element.css("line-height", "normal");
self.valueDiv.css("line-height", "normal");
self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto");
}
}
},
///get the progress bar's progress orientation.
_isHorizontal: function () {
return this.options.fillDirection === "west" || this.options.fillDirection === "east";
},
///start the progress
startTask: function () {
/// <summary>Start the progress</summary>
if ($(":animated", this.element).length == 0) {
var value = this.value();
this._refreshValue(value);
}
},
///stop the progress
stopTask: function () {
/// <summary>Stop the progress</summary>
this.valueDiv.stop();
},
//init the progress bar
_initElements: function () {
var self = this;
var o = self.options;
self.element.removeClass("ui-wijprogressbar-west ui-wijprogressbar-east ui-wijprogressbar-north ui-wijprogressbar-south").addClass("ui-wijprogressbar-" + o.fillDirection);
var height = self.element.height();
self.valueDiv.css("line-height", "");
self.label.removeClass("lb_west lb_east lb_south lb_north lb_center lb_running").addClass("lb_" + o.labelAlign)
.css("line-height", "").css({
left: "",
right: "",
top: "",
bottom: ""
});
if (self._isHorizontal()) {
self.valueDiv.height(height)
.css("line-height", height + "px");
}
else {
self.valueDiv.width(self.element.width());
}
self._setLabelSide();
if (self.options.indicatorImage !== "") {
self.valueDiv.css("background", "transparent url(" + self.options.indicatorImage + ") repeat fixed");
}
},
///refresh the progress
_refreshProgress: function (value) {
var self = this;
var ea = new $.Event('progressChanging');
var nowValue = value * (self.max - self.min) / 100 + self.min;
var o = self.options;
var cancel = self._triggerEvent("progressChanging", self.element.attr("aria-valuenow"), nowValue, false);
if (cancel) {
return;
}
if (self._isHorizontal()) {
self.valueDiv.toggleClass(o.fillDirection === "east" ? "ui-corner-right" : "ui-corner-left", value === self.max).width(value + "%");
}
else {
self.valueDiv.toggleClass(o.fillDirection === "south" ? "ui-corner-bottom" : "ui-corner-top", value === self.max).height(value + "%");
}
self.element.attr("aria-valuenow", nowValue);
var txt = self._getFormatString(o.labelFormatString, value);
self._setLabelsText(txt);
var _tooTip = self._getFormatString(o.toolTipFormatString, value);
self.element.attr("title", _tooTip);
},
///play progress animation.
_performAnimating: function (obj) {
var self = this;
var len = Math.floor(obj / self.options.indicatorIncrement);
obj = len * self.options.indicatorIncrement;
var o = self.options;
self._refreshProgress(obj);
if (o.labelAlign === "running") {
if (self._isHorizontal()) {
var eleWidth = self.element.width();
var labelWidth = self.label.outerWidth();
var progressWidth = self.valueDiv.outerWidth();
var left = eleWidth === progressWidth ? eleWidth - labelWidth : obj * eleWidth / 100 - labelWidth + labelWidth * (eleWidth - progressWidth) / eleWidth;
self.label.css(o.fillDirection === "east" ? "left" : "right", left);
}
else {
var eleHeight = self.element.height();
var labelHeight = self.label.outerHeight();
var progressHeight = self.valueDiv.outerHeight();
var top = eleHeight === progressHeight ? eleHeight - labelHeight : obj * eleHeight / 100 - labelHeight + labelHeight * (eleHeight - progressHeight) / eleHeight;
self.label.css(o.fillDirection === "south" ? "top" : "bottom", top);
}
}
},
//set the label'text
_setLabelsText: function (text) {
if (!this._isHorizontal() && this.options.labelAlign === "rightOrBottom") {
this.label.html('<span style=\'position:absolute;bottom:0px;text-align:center;width:' + this.element.width() + 'px;\'>' + text + '</span>');
return;
}
this.label.html(text);
},
//format the text
_getFormatString: function (format, val) {
var self = this;
var processValue = parseInt(self.element.attr("aria-valuenow"));
var remainingProcess = self.max - processValue
var percentProgress = val;
var percentageRemaining = 100 - val;
var r = /\{0\}/g;
format = format.replace(r, processValue.toString());
r = /\{ProgressValue\}/g;
format = format.replace(r, processValue.toString());
r = /\{1\}/g;
format = format.replace(r, percentProgress.toString());
r = /\{PercentProgress\}/g;
format = format.replace(r, percentProgress.toString());
r = /\{2\}/g;
format = format.replace(r, remainingProcess.toString());
r = /\{RemainingProgress\}/g;
format = format.replace(r, remainingProcess.toString());
r = /\{3\}/g;
format = format.replace(r, percentageRemaining.toString());
r = /\{PercentageRemaining\}/g;
format = format.replace(r, percentageRemaining.toString());
r = /\{4\}/g;
format = format.replace(r, self.min);
r = /\{Min\}/g;
format = format.replace(r, self.min);
r = /\{5\}/g;
format = format.replace(r, self.max);
r = /\{Max\}/g;
format = format.replace(r, self.max);
return format;
},
///destroy the widget.
destroy: function () {
this.element.empty();
this.element.removeClass("ui-wijprogressbar ui-widget ui-widget-content ui-corner-all ui-wijprogressbar-h").removeAttr("title");
$.Widget.prototype.destroy.apply(this, arguments);
}
});
///progress bar animation. If user want to write custom animation,can override the animations option.And set the animated to the options key.
$.extend($.ui.wijprogressbar, {
animations: {
progress: function (options, additions) {
options = $.extend({
easing: "swing",
duration: 1000
}, options, additions);
options.content.stop(true, true).animate({
widthvalue: options.processValue
}, options);
}
}
});
})(jQuery);
widget主要是處理ui層面的，實用與否只有用了才知道，widget可以利用jQuery已經存在的css framework。利用themeRoller，可以很輕松的換膚。至於說功能，可以在用戶反饋後再慢慢完善。
這個progressbar本身是繼承自jQuery ui progressbar的。因為開源，如果自己有好的想法，自己也可以去增加自己需要的功能。