| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-progress></sbux-progress> |
||
| 필수 속성 | id, name, uitype | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | bar, loading | ||
| 자식 Dom 구조 | 고정형 |
<sbux-progress-bar>
|
|
| 예시) HTML 형태의 개발 |
|---|
|
<sbux-progress id="idxProg" name="progNm" uitype="bar" valuemin="0" valuemax="200" indicator-type="load" unit="percent"> <sbux-progress-bar striped="true" show-motion="true"> <sbux-bar valuenow= "20" body-color="#f25c5c" img-class="Custom_ClassA" label="*%" label-style="color:black;font-weight:bold;"></sbux-bar> <sbux-bar valuenow= "40" body-color="#f6ab53" img-class="Custom_ClassB" label="*%" label-style="color:black;font-weight:bold;"></sbux-bar> <sbux-bar valuenow= "50" body-color="#69b64f" img-class="Custom_ClassC" label="*%" label-style="color:black;font-weight:bold;"></sbux-bar> </sbux-progress-bar> </sbux-progress> <script> function openLayer(){ SBUxMethod.openProgress("progNm"); }; </script> <sbux-progress id="idxProg" name="progNm" uitype="bar" indicator-type="load" show-openlayer="true" openlayer-title="데이터 로딩 중입니다. 잠시만 기다려 주십시오."> <sbux-progress-bar> <sbux-bar valuenow= "50" body-color="#f25c5c" label="*%" label-style="color:black;font-weight:bold;> </sbux-bar> </sbux-progress-bar> </sbux-progress> <sbux-button id="btnNormal" name="btnNormal" uitype="normal" onclick="openLayer()" text="팝업되는 프로그레스"></sbux-button> <sbux-progress id="idxProgLoading" name="progLoading" uitype="loading" show-openlayer="true" openlayer-title="데이터 로딩 중입니다. 잠시만 기다려 주십시오."> </sbux-progress> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <input type="button" value="progress open" onclick="SBUxMethod.openProgress('sbScriptNm')"> <script> $(document).ready(function(){ $('#sbArea').sbProgress({ name : 'sbScriptNm', uitype : 'loading', showOpenlayer : true }); }); </script> |
| 속성명 | 설명 / 유형(b:bar, l:loading) | 비고 | |
|---|---|---|---|
| valuemin | 최소값 설정 | b | |
| valuemax | 최대값 설정 | b | |
| unit | 환산단위 | b | percent |
| indicator-type | 표시할 타입 | b | normal,statcked,load |
| show-openlayer | layer popup 으로 progress 표시 | b | l | false,true |
| openlayer-title | progress 표시 문구 | b | l | |
| is-fixed | popup 화면의 close 설정 | b | true:사용자가 직접 close, false:valuemax 도달 1초 후 자동닫힘 |
| is-modal | popup 화면을 modal 형태로 띄움 | b | true,false |
| holding-value | indicator-type="load" 이고
show-openlayer="true" 인 경우 SBUxMethod.set 을 통해 값이 입력되기 전까지 holding-value 에 지정된 값에서 대기 |
b | |
| 자식구조 태그 | 태그설명 / 속성명 / 속성설명 | 비고 | |
|---|---|---|---|
| <sbux-progress-bar> | 스타일 지정값을 설정하기 위한 구조 | 'bar' 타입인 경우 | |
| striped | 배경색에 stripe 설정 | true,false | |
| show-motion | 배결이 움직이도록 설정 | false,true | |
| <sbux-bar> | sbux-progress-bar 의 자식으로 구간에 대한 설정 구조 | ||
| valuenow | 표시값 | ||
| body-color | bar 배경색 | #f25c5c | |
| img-class | bar 배경을 CSS 로 설정시 Class명 | ||
| img-src | bar 배경을 이미지로 설정시 이미지 경로 | ||
| label | label 표시 | ||
| label-style | label css style | ||
| API 명 | 설명 / 유형(b:bar, l:loading) | 비고 | |
|---|---|---|---|
| SBUxMethod.set | 진행값 변경시 입력 | b | indicator-type="stacked" 인 경우는 미적용 |
| SBUxMethod.get | 진행값 호출 | b | indicator-type="stacked" 인 경우는 미적용 |
| SBUxMethod.openProgress | popup 형태로 progress 를 open | b | show-openlayer="true" 시 적용 |
| SBUxMethod.closeProgress | popup 형태로 open 된 progress 를 close | b | show-openlayer="true" 시 적용 |
| SBUxMethod.promiseProgress | 처리시간이 많은 프로세스를 실행할때 동기화 | b | |
| SBUxMethod.promiseProgressWorker | web worker 사용, 처리시간이 많은 프로세스를 실행할때 동기화
브라우저 사용 제약사항 - IE 10+ , Chrome 4+, FF 3.5+, Safari 4.0+, Opera 11.5 코드 제약사항 - 호출하는 function 내에는 DOM 구조에 대한 접근이 없어야 합니다. - DOM 에 접근 불가 - window object 에 접근 불가 - document object 에 접근 불가 - parent object 에 접근 불가 형식 - SBUxMethod.promiseProgressWorker(param1, param2, param3); - 인자값 -param1 : progress 모델명 - param2 : thread 로 실행시킬 function 명 이 function 내에는 반드시 postMessage 호출이 있어야 합니다. ( * postMessage 를 통해 web worker 에서 실행한 값을 전달받을 수 있습니다.) - param3 : thread 로 실행시킬 후 postMessage 가 전달되었을때 호출하는 function |
b | |
| SBUxMethod.render | <sbux-xxx tag >랜더링 | b | |
