jquery를 기반으로 하는 진행률 표시줄 widget_jquery

이 프로젝트의 데모 웹사이트 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:
*

*/
(함수 ($) {
$.widget("ui.wijprogressbar", $.ui.progressbar, {
옵션: {
///

///진행률 표시줄의 라벨 정렬 값은 "east", "west", "center", "north", "south" 또는 "running"이어야 합니다.
///기본값: "center".
///유형: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: "동쪽",
///

///진행률 표시줄의 방향입니다. 값은 '수평' 또는 '수직'이어야 합니다.
///기본값: "가로".
///유형:문자열.
///코드 샘플:$('selector').wijprogressbar('option','orientation','horizontal').
///요약>
///방향: "가로",
///

///라벨 텍스트의 형식을 설정합니다. 사용 가능한 형식은 다음과 같습니다.
///{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 애니메이션의 옵션 매개변수
///Default:"{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);
break;
case "maxValue":
case "minValue":
self.options[ key] = val;
self[key === "maxValue" ? "max" : "min"] = val;
self._refreshValue()
case "labelFormatString" :
case "toolTipFormatString":
self.options[key] = value
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, 인수);
휴식;
case "orientation":
case "fillDirection":
case "labelAlign":
case "indicatorImage":
self.options[key] = value;
self._initElements();
self._refreshValue();
//$.Widget.prototype._setOption.apply(this, 인수);
휴식;
case "indicatorIncrement":
value = (value == 0 ? 1 : value);
self.options[키] = 값;
self._initElements();
self._refreshValue();
휴식;
기본값: 중단;
}
$.Widget.prototype._setOption.apply(self, 인수);
},
　　　　　///위젯 생성
_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, 인수);
self.label = $("").addClass("ui-progressbar-label ui-corner-left").appendTo(self.valueDiv);
self._initElements();
self._isInit = true;
self._refreshValue();
},
　　　　　///프레스바 이벤트를 트리거합니다.
_triggerEvent: 함수(eventName, oldValue, newValue, cancel) {
var ea = $.Event(eventName);
ea.data = {
oldValue: oldValue,
newValue: newValue,
취소: 취소
};
this._trigger(eventName, ea);
ea.data.cancel을 반환합니다.
},
　　　　//진행률 값을 새로 고칩니다.
_refreshValue: 함수() {
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 animations = $.ui.wijprogressbar.animations;
var Duration = o.duration;
var easing = o.animated
if(easing && !animations[easing] ) {
easing = "진행";
}
if (!animations[easing]) {
animations[easing] = function (options) {
this.progress(options, {
easing,
기간: 기간 || 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._isHorizontal()) {
if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") {
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("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");
}
}
},
　　　　　　　///진행률 표시줄의 진행 방향을 가져옵니다.
_isHorizontal: 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("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({
왼쪽: "",
오른쪽: "",
상단: "",
하단: ""
});
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 ") 반복 고정");
}
},
　　　　　///진행 새로고침
_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 (취소) {
return;
}
if (self._isHorizontal()) {
self.valueDiv.toggleClass(o.fillDirection === "east" ? "ui-corner-right" : "ui-corner-left" , 값 === self.max).width(value "%");
}
else {
self.valueDiv.toggleClass(o.fillDirection === "south" ? "ui-corner-bottom" : "ui-corner-top", value === self. 최대).높이(값 "%");
}
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);
},
　　　　　///진행 애니메이션을 재생합니다.
_performAnimating: 함수(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 === "실행 중") {
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 === "동쪽" ? "왼쪽" : "오른쪽", 왼쪽);
}
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('' 텍스트 '');
반환;
}

this.label.html(text);
},
　　　　　　　//텍스트 서식 지정
_getFormatString: function (format, val) {
var self = this;
var processValue = parsInt(self.element.attr("aria-valuenow"));
var 잔여Process = self.max - processValue
var PercentProgress = val;
var 백분율Remaining = 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, 남은Process.toString());
r = /{남은 진행률}/g;
format = format.replace(r, 남은Process.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 = /{최대}/g;
format = format.replace(r, self.max);
반환 형식;
},
　　　　 ///위젯을 파괴합니다.
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, 인수);
}
});
　///진행률 표시줄 애니메이션. 사용자가 맞춤 애니메이션을 작성하려면 애니메이션 옵션을 재정의할 수 있습니다. 그리고 애니메이션을 옵션 키로 설정하세요.
$.extend($.ui.wijprogressbar, {
animations: {
진행: 함수(옵션, 추가) {
options = $.extend({
easing: "swing",
기간: 1000
}, 옵션, 추가);
options.content.stop(true, true).animate({
widthvalue: options.processValue
}, options)
}
}
}); })(jQuery);

위젯은 주로 UI 수준을 다룹니다. 실용적인지 여부는 jQuery의 기존 CSS 프레임워크를 활용해야 알 수 있습니다. themeRoller를 사용하면 스킨을 쉽게 변경할 수 있습니다. 기능에 관해서는 사용자 피드백을 통해 점진적으로 개선될 수 있습니다.
이 진행률 표시줄 자체는 jQuery ui 진행률 표시줄에서 상속되었습니다. 오픈소스이기 때문에 좋은 아이디어만 있으면 필요한 기능을 추가할 수 있습니다.