/*
* 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)/MB + 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);
Widgets are mostly about UI-level, practical or not, widgets can take advantage of the CSS framework that jquery already exists. Using Themeroller, you can easily change your skin. As for the function, you can gradually improve the user feedback.
This ProgressBar itself is inherited from the jquery UI ProgressBar. Because open source, if you have good ideas, you can also go to increase the functionality you need.
