这个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"