Component
ProgressBar
Basic
프로그레스바는 작업의 진행 상태를 시각적으로 표현할 때 사용하는 컴포넌트입니다. class="Progressbar"
기본 Progressbar
<div class="Progressbar"></div>
텍스트가 있는 ProgressBar
- 프로그래스바 내부에 텍스트가 있는 ProgressBar 입니다.
- 샘플 코드처럼 Progress-text 클래스를 추가하여 사용하셔야 합니다.
- 진행률(%)이 텍스트로 보여집니다.
- data-starttext, data-endtext 속성으로 시작 텍스트와 종료 텍스트를 지정할 수 있습니다.
<div class="Progressbar Progress-text"></div>
부모영역에 특정 스타일이 적용 된 ProgressBar
- 프로그래스바 상위 부모 영역에 float:right or left 또는 display:inline-block 스타일이 적용되어있는 ProgressBar 입니다.
- 이 구조의 경우, 샘플 코드처럼 부모 영역에 width 값을 설정하여 사용하셔야 합니다.
<div style="display:inline-block;width:100%">
<div class="Progressbar Progress-text" data-default="60"></div>
</div>
Attributes
data-default
- "10" | "20" | "30" | ...
- 프로그래스바의 초기값을 설정합니다.
<div class="Progressbar" data-default="60"></div>
data-starttext, data-endtext
- {string}
- 이 속성은 Progress-text 클래스와 함께 사용해야 합니다.
- 프로그래스바 시작 텍스트와 종료 텍스트를 속성값으로 지정하실 수 있습니다.
<div class="Progressbar Progress-text" data-starttext="start" data-endtext="end"></div>
<div class="Progressbar Progress-text Margin-top-10" data-starttext="start" data-endtext="end" data-default="100"></div>
Options
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
default
- data-default 참고
starttext
endtext
- data-endtext 참고
Functions
.getOptions()
Progressbar에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Progressbar에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Progressbar에 설정된 모든옵션값을 가져옵니다.
$('#Progressbar').getOptions();
.getValue()
진행된 프로그래스바의 백분율 값을 가져오는 함수입니다.
- return
- value {String}
- 진행된 프로그래스바의 백분율 값
- value {String}
.setValue(value)
프로그래스바의 백분율 값을 세팅해주는 함수입니다.
- parameter
- value {String|Number} Required
- 설정된 값에 따라 프로그래스바 상태가 바뀝니다.
- value {String|Number} Required
<button id="btn_setValue_30" class="Button">Set Value 30%</button>
<button id="btn_setValue_50" class="Button Margin-left-10">Set Value 50%</button>
<button id="btn_setValue_100" class="Button Margin-left-10">Set Value 100%</button>
<button id="btn_getValue" class="Button Float-right">Get Value</button>
<div id="progressbarId" class="Progressbar Margin-top-10"></div>
$('#btn_setValue_30').on('click', function() {
$('#progressbarId').setValue(30);
});
$('#btn_setValue_50').on('click', function() {
$('#progressbarId').setValue(50);
});
$('#btn_setValue_100').on('click', function() {
$('#progressbarId').setValue(100);
});
$('#btn_getValue').on('click', function() {
alert($('#progressbarId').getValue());
});
.setOptions(options)
프로그래스바의 옵션기능을 사용할 때 세팅하는 값입니다.
Button에 설정된 옵션값을 모두 가져올 수 있습니다.
- parameter
- options
- bgColor {string} Optional
- 프로그래스바의 색을 지정합니다. ex)'blue'|'red'|'#000000'..
- bgUrl {string} Optional
- 프로그래스바에 이미지를 삽입할 때 사용합니다.
- showText {boolean} Optional
- 프로그래스바의 내부 텍스트를 표현할 때 사용합니다. ex)true|false
- showText값이 true일때 아래의 옵션을 사용합니다.
- textColor {string} Optional
- 프로그래스바 텍스트 색을 지정할 때 사용합니다.
- textArray {array[]} Optional
- 프로그레스 바 시작 텍스트와 종료 텍스트를 지정할 때 사용합니다. ex) ['start', 'end']
- bgColor {string} Optional
- options
<button id="setBgColor" class="Button">set bgColor </button>
<button id="setTextColor" class="Button">set textColor </button>
<button id="setValue0" class="Button">set Value(0) </button>
<button id="setValue70" class="Button">set Value(70) </button>
<button id="setValue100" class="Button">set Value(100) </button>
<button id="setText" class="Button">setOptions (textArray:["start","end"])</button>
<div id="progressbarId_setOptions" class="Progressbar Progress-text Margin-top-10" data-default="30"></div>
$('#setBgColor').on('click', function() {
$('#progressbarId_setOptions').setOptions( {
bgColor : '#' + Math.floor(Math.random() * 1004).toString(16)
});
});
$('#setTextColor').on('click', function() {
$('#progressbarId_setOptions').setOptions( {
textColor : '#' + Math.floor(Math.random() * 1004).toString(16)
});
});
$('#setValue0').on('click', function() {
$('#progressbarId_setOptions').setValue(0);
});
$('#setValue70').on('click', function() {
$('#progressbarId_setOptions').setValue(70);
});
$('#setValue100').on('click', function() {
$('#progressbarId_setOptions').setValue(100);
});
$('#setText').on('click', function() {
$('#progressbarId_setOptions').setOptions({
textArray : ["start", "end"]
});
});
Extra Example
Status
Status :
0%
completed..
<button id="btn0" data-type="button">진행</button>
<button id="btn1" data-type="button" data-disabled="true">멈춤</button>
<button id="btn2" data-type="button">초기화</button>
<div id="progId" class="Progressbar Margin-top-10"></div>
<span>Status : </span>
<span id="textId" style="color:red;">0%</span>
<span> completed..</span>
$('#btn0').on('click', function () {
window._progresstest = true;
setTimeout(updateProgressbar, 100);
$('#btn0').setEnabled(false);
$('#btn1').setEnabled(true);
});
$('#btn1').on('click', function () {
window._progresstest = false;
$('#btn0').setEnabled(true);
$('#btn1').setEnabled(false);
});
$('#btn2').on('click', function () {
window._progresstest = false;
$('#progId').setValue(0);
$('#textId').text($('#progId').getValue() + '%');
$('#btn0').setEnabled(true);
$('#btn1').setEnabled(false);
});
function updateProgressbar() {
if (!window._progresstest) {
return;
}
var value = $('#progId').getValue();
if (value == 100) {
return;
}
$('#progId').setValue(value + 1);
$('#textId').text($('#progId').getValue() + '%');
if (value < 99) {
setTimeout(updateProgressbar, 100);
} else {
$('#btn1').setEnabled(false);
}
}