jquery に基づくプログレスバー widget_jquery

このプロジェクトのデモ Web サイト 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:
*

*/
(function ($) {
$.widget("ui.wijprogressbar", $.ui.progressbar, {
options: {
///

///進行状況バーのラベルの配置は、「東」、「西」、「中央」、「北」、「南」、または「実行中」である必要があります。
///デフォルト: "center".
///Type:String.
///コードサンプル:$('.selector').wijprogressbar('option','labelAlign','center')。 //

labelAlign: "center",
///

///進行状況バーの値は数値である必要があります。 /デフォルト:0。
///タイプ:数値。
///コードサンプル:$('.selector').wijprogressbar('option','value',60)。 /

maxValue: 100,
///

///進行状況バーの最小値。
///デフォルト。 :0.
///タイプ:数値。
///コードサンプル:$('.selector').wijprogressbar('option','minValue',0)。 ;/summary>
minValue: 0,
///

///進行状況バーの塗りつぶしの方向。値は「東」、「西」、「北」である必要があります。または「南」。
///デフォルト:「東」。
///タイプ:文字列。
///コードサンプル:$('.selector').wijprogressbar('option','fillDirection','east')。
///概要>
fillDirection: "east",
///

///プログレスバーの方向。値は「水平」または「垂直」である必要があります。
///デフォルト:「水平」。
///タイプ:文字列。
///コードサンプル:$('selector').wijprogressbar('option','orientation','horizo​​ntal')。
///概要>
///方向: "水平",
///

///ラベル テキストの形式を設定します。使用可能な形式は次のとおりです:
///{0} または {ProgressValue} は、現在の進行状況の値を表します。
///{1} または {PercentProgress} は、進行状況バーの現在のパーセントを表します。
///{2} または {RemainingProgress} は、進行状況バーの残りの進行状況を表します。
///{3} または {PercentageRemaining} は、進行状況バーの残りのパーセントを表します。
///{4} または {Min} は、進行状況バーの最小値を表します。
///{5} または {Max} は、進行状況バーの最大値を表します。
///デフォルト:「{1}%」。
///タイプ:文字列。
///コードサンプル:$('.selector').wijprogressbar('option','labelFormatString','{0}%')。
///概要>
labelFormatString: "{1}%",
///

///プログレスバーのツールチップの形式、labelFormatStringのような形式の表現を設定します。
///デフォルト:「{1}%」。
///タイプ:文字列。
///コードサンプル:$('.selector').wijprogressbar('option','toolTipFormatString','{1}%')。
///概要>
toolTipFormatString: "{1}%",
///

///進行状況バーのインジケーターの増分。
///デフォルト:1。
///タイプ:数値。
///概要>
///コードサンプル:$('.selector').wijprogressbar('option','indicatorIncrement',10)。
indicatorIncrement: 1,
///

///インジケーターの画像の URL。
///デフォルト:「」。
///タイプ:文字列。
///コードサンプル:$('.selector').wijprogressbar('option','indicatorImage','images/abc.png')。
///概要>
indicatorImage: "",
///

///プログレスバーのアニメーションの遅延。
///デフォルト:0。
///タイプ:数値。
///コードサンプル:$('.selector').wijprogressbar('option',
///

animationDelay: 0,
/// ///jQuery のアニメーションのオプション パラメーター。
///デフォルト:"{animated:'progress',duration:500}"。
///Type:Options。 ///コードサンプル:$('.selector').wijprogressbar('option','animationOptions',{animated:'progress',duration:600})。 >animationOptions: {
animated: 'progress',
duration: 500
}
},
//オプションを設定するとき、このメソッドをトリガーします
_setOption: function (key. , value) {
var val, self = this;
switch (key) {
case "value":
val = parseInt(value);
self.options[key] = val;
self._refreshValue(val);
case "maxValue":
case "minValue":
val = parseInt(value); key] = val;
self[key === "max" : "min"] = val;
break; :
case "toolTipFormatString":
self.options[key] = 値;
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, argument);
休憩;
case "orientation":
case "fillDirection":
case "labelAlign":
case "indicatorImage":
self.options[key] = 値;
self._initElements();
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, argument);
休憩;
case "indicatorIncrement":
値 = (値 == 0 ? 1 : 値);
self.options[key] = 値;
self._initElements();
self._refreshValue();
休憩;
デフォルト: ブレーク;
}
$.Widget.prototype._setOption.apply(self, argument);
},
///ウィジェットを作成します
_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, argument);
self.label = $("").addClass("ui-progressbar-label ui-corner-left").appendTo(self.valueDiv);
self._initElements();
self._isInit = true;
self._refreshValue();
},
///プレスバーイベントをトリガーします。
_triggerEvent: function (eventName, oldValue, newValue, cancel) {
var ea = $.Event(eventName);
ea.data = {
oldValue: oldValue,
newValue: newValue,
cancel: キャンセル
};
this._trigger(eventName, ea);
ea.data.cancel を返す;
},
//進行状況の値を更新します。
_refreshValue: function () {
var self = this;
if (!self._isInit) {
return;
}
var value = self.value();
var パーセント = (値 - self.min) / (self.max - self.min) * 100;
var o = self.options;

var cancel = self._triggerEvent("beforeProgressChanging", self.element.attr("aria-valuenow"), value, false);
if (キャンセル) {
return;
}
self.valueDiv.css({
幅: "",
高さ: ""
});
// アニメーションがある場合。
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),
ステップ: $.proxy(function (ovalue) {
self._performAnimating(ovalue);
}, self),
processValue: パーセント
}
var アニメーション = $.ui.wijprogressbar.animations;
var イージング = o.animated;
if (イージング && !animations[イージング] ) {
イージング = "進行状況";
}
if (!animations[イージング]) {
アニメーション[イージング] = 関数 (オプション) {
this.progress(options, {
イージング: イージング,
duration: 継続時間 || 1000
}
}
アニメーション[イージング](animateOptions, self.options.animationOptions);
}、self)、o.animationDelay);
}
else {
//progressChanged イベントをトリガーします。
var oldValue = self.element.attr("aria-valuenow");
self._refreshProgress(パーセント);
self._triggerEvent("progressChanged", oldValue, value, false);
}
},
///進行状況バーのラベルの位置を設定します。
_setLabelSide: function () {
var self = this;
var fillDirection = self.options.fillDirection;
var labelAlign = self.options.labelAlign;
if (self._ishorizo​​ntal()) {
if (labelAlign === "西" || labelAlign === "東" || labelAlign === "中央") {
self.label .css("幅", self.element.width() 'px');
}
else
if (labelAlign === "running") {
self.label.css("width", "auto");
}
else {
self.element.css("line-height", "normal");
self.valueDiv.css("行の高さ", "標準");
self.label.css("height", labelAlign === "north" ? self.element.height() 'px' : "auto");
}
}
else {
if (labelAlign === "西" || labelAlign === "東" || labelAlign === "中央") {
self. label.css({ "行の高さ": self.element.height() 'px', "幅": 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("行の高さ", "標準");
self.label.css("height", labelAlign === "north" ? self.element.height() 'px' : "auto");
}
}
},
///進行状況バーの進行方向を取得します。
_ishorizo​​ntal: function () {
return this.options.fillDirection === "west" || this.options.fillDirection === "東";
},
///進行状況を開始
startTask: function () {
///

進行状況を開始

if ($(":animated", this.element).length == 0) {
var value = this.value();
this._refreshValue(値);
}
},
///進行を停止
stopTask: function () {
///

進行を停止

this.valueDiv.stop();
},
//進行状況バーを初期化します
_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("行の高さ", "");
self.label.removeClass("lb_west lb_east lb_south lb_north lb_center lb_running").addClass("lb_" o.labelAlign)
.css("line-height", "").css({
左: ""、
右: ""、
上: ""、
下: ""
});
if (self._ishorizo​​ntal()) {
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 ") 繰り返し固定");
}
},
///進行状況を更新
_refreshProgress: function (value) {
var self = this;
var ea = new $.Event('progressChanging');
var nowValue = 値 * (self.max - self.min) / 100 self.min;
var o = self.options;
var cancel = self._triggerEvent("progressChanging", self.element.attr("aria-valuenow"), nowValue, false);
if (キャンセル) {
return;
}
if (self._ishorizo​​ntal()) {
self.valueDiv.toggleClass(o.fillDirection === "east" ? "ui-corner-right" : "ui-corner-left" 、値 === self.max).width(値 "%");
}
else {
self.valueDiv.toggleClass(o.fillDirection === "south" ? "ui-corner-bottom" : "ui-corner-top", value === self. max).height(値 "%");
}
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("タイトル", _tooTip);
},
///進行状況アニメーションを再生します。
_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._ishorizo​​ntal()) {
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);
}
}
},
//ラベルのテキストを設定します
_setLabelsText: function (text) {
if (!this._ishorizo​​ntal() && this.options.labelAlign === "rightOrBottom") {
this.label.html('' テキスト '');
戻る;
}

this.label.html(テキスト);
},
//テキストをフォーマットする
_getFormatString: function (format, val) {
var self = this;
var processValue = parseInt(self.element.attr("aria-valuenow"));
var 残りのプロセス = self.max - processValue
var パーセント進捗 = val;
var パーセント残り = 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 = /{進捗率}/g;
format = format.replace(r,percentProgress.toString());
r = /{2}/g;
format = format.replace(r, RemainingProcess.toString());
r = /{残りの進行状況}/g;
format = format.replace(r, RemainingProcess.toString());
r = /{3}/g;
format = format.replace(r,percentageRemaining.toString());
r = /{残りの割合}/g;
format = format.replace(r,percentageRemaining.toString());
r = /{4}/g;
format = format.replace(r, self.min);
r = /{分}/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);
形式を返します。
},
　　　　 ///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 mainly deals with the UI level. Whether it is practical or not can only be known by using it. Widget can make use of jQuery’s existing css framework. Using themeRoller, you can easily change the skin. As for functions, they can be gradually improved after user feedback.
This progressbar itself is inherited from jQuery ui progressbar. Because of open source, if you have a good idea, you can add the functions you need.