Jquery-based progressbar widge

Demo website http://wijmo.com/Wijmo-Open/samples/ for this project
Copy codeThe Code is as follows :/*
* 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 shoshould 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 shocould 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 shocould be numeric.
/// Default: 0.
/// Type: Number.
// Code sample: $ ('. selector'). wijprogressbar ('option', 'minvalue', 0 ).
/// </Summary>
MinValue: 0,
/// <Summary>
/// The fill ction of the progress bar. the value shocould be "east", "west", "north" or "south ".
/// Default: "east ".
/// Type: String.
// Code sample: $ ('. selector'). wijprogressbar ('option', 'fillction ction ', 'east ').
/// </Summary>
FillDirection: "east ",
/// <Summary>
/// The progressbar's orientation. the value shocould 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', 'indicatorimag', '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. _ externimating (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 SS
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", "" rows .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 ('sssschanging ');
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.
_ Required imating: 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-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 mainly used to process the ui Layer. You only need to know whether widgets are useful. widgets can use the css framework that already exists in jQuery. ThemeRoller can be used for skin replacement easily. The function can be improved after user feedback.
This progressbar is inherited from jQuery ui progressbar. Because it is open-source, if you have good ideas, you can also add the functions you need.