맨위로가기
 

SBUx

닫기

Spinner

증가/감소, 전/후의 개념을 가진 데이터를 적용된 버튼을 이용해 조작할 수 있는 컴포넌트입니다.

기본 사항

사항 설명 비고
HTML 태그 형태

<sbux-spinner></sbux-spinner>
필수 속성 id, name, uitype
* 2.6.962 버전이후 변경사항 :
- id 속성 미사용시 name 값으로 자동 매핑
- uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값 normal, splitbutton
예시) HTML 형태의 개발

<sbux-spinner id="idxSpinner_norm" name="spinner_norm" uitype="normal"

                step-value="5"></sbux-spinner>
예시) jQuery Plugin 형태의 개발

<div id="sbArea"></div>

<script>

   $(document).ready(function(){

       $('#sbArea').sbSpinner({

           name : 'sbScriptNm',

           uitype : 'normal',

       });

   });

</script>

주요 속성 사항

속성명 설명 / 유형(n:normal, s: splitbutton) 비고
unmask-data-format true 적용하고 submit 시 포맷이 적용되지 않은 데이터를 가져오도록 설정하는 속성 n, s
unmask-data-format-name server 측에 값을 전달할 때 전달할 이름을 설정하는 속성 n, s
init-focused-index 로드 직후 및 사용자가 input 을 직접 선택하기 전, 버튼조작 시 수정될 input 의 인덱스를 설정하는 속성 n, s
buttons-type glyph-icon 으로 설정할 버튼 아이콘 설정하는 속성 n, s
data-type 데이터 타입에 따라 데이터 조작영역 설정하는 속성 n, s
input-text-align input-text-align은 input 의 텍스트 정렬 형태를 설정하는 속성 n, s
step-value ncrease/decrease 버튼 클릭으로 조작할 숫자데이터에 증가/감소시킬 value 설정하는 속성 n, s
button-pressed-intervals increase/decrease 버튼 클릭으로 조작할 숫자데이터에 증가/감소시킬 value 설정하는 속성 n, s
step-value-pressed button-pressed-intervals 속성 선 설정 후, mousedown 상태가 button-pressed-intervals 속성 설정 시간이상 지속되는 경우 증가/감소시킬 value 설정하는 속성 n, s
init init은 사용자가 값을 입력하기 전, 초기 값을 입력하기 위해 설정하는 속성 n, s
readonly-input input영역만 읽기전용으로 적용하는 속성 n, s
disabled 컴포넌트를 비활성화 하는 속성 n, s
disabled-except-on-input disabled 선 적용으로 컴포넌트 비활성화 시 input` 비활성화 제외하는 속성 n, s
disabled-except-on-button disabled 선 적용으로 컴포넌트 비활성화 시 button은 비활성화 제외하는 속성 n, s
number-prefix-text input 영역 앞에 특정 문구를 고정하여 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-suffix-text input 영역 뒤에 특정 문구를 고정하여 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-prefix-default-style prefix-text 영역에 default 로 제공하는 스타일 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-suffix-default-style suffix-text 영역에 default 로 제공하는 스타일을 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-radix-point 입력된 데이터에 설정할 , 표현 자릿수 number 데이터로 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-decimal-point 입력된 데이터에 설정할 소숫점 . 자릿수 number 데이터로 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-min-value 숫자데이터로 입력할 수 있는 최소 value 설정하는 속성 n, s data-type이 number일 때 사용 가능
number-max-value 숫자데이터로 입력할 수 있는 최대 value 설정하는 속성 n, s data-type이 number일 때 사용 가능
time-format 시간데이터 포맷설정하는 속성 n, s data-type이 time일 때 사용 가능
time-hours 표현할 시간을 12시간체계, 24시간체계 중 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-meridiem 오전, 오후 시간규칙 표현방법 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-meridiem-default-style time-meridiem 표현 영역에 default 로 제공하는 스타일 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-step-value increase/decrease 버튼 클릭으로 조작할 시간데이터에 증가/감소시킬 value 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-step-value-pressed button-pressed-intervals 속성 선 설정 후, mousedown 상태가 button-pressed-intervals 속성 설정 시간이상 지속되는 경우 증가/감소시킬 value 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-min-value 시간데이터로 입력할 수 있는 최소 value 설정하는 속성 n, s data-type이 time일 때 사용 가능
time-max-value 시간데이터로 입력할 수 있는 최대 value 설정하는 속성 n, s data-type이 time일 때 사용 가능
date-format 시간데이터 포맷설정하는 속성 n, s data-type이 date일 때 사용 가능
date-step-value increase/decrease 버튼 클릭으로 조작할 날짜데이터에 증가/감소시킬 value 설정하는 속성 n, s data-type이 date일 때 사용 가능
date-step-value-pressed button-pressed-intervals 속성 선 설정 후, mousedown 상태가 button-pressed-intervals 속성 설정 날짜이상 지속되는 경우 증가/감소시킬 value 설정하는 속성 n, s data-type이 date일 때 사용 가능
date-min-value 날짜데이터로 입력할 수 있는 최소 value 설정하는 속성 n, s data-type이 date일 때 사용 가능
date-max-value 날짜데이터로 입력할 수 있는 최대 value 설정하는 속성 n, s data-type이 date일 때 사용 가능
buttons-direction 버튼들을 수직/수평 정렬 설정하는 속성 n
buttons-placement 버튼들을 좌/우 위치 설정하는 속성 n, s
callback-before-refresh SBUxMethod.refresh('모델명') 을 통해 호출했을 시 spinner 를 재구성하기 전에 호출할 callback 함수를 등록하는 콜백함수 n, s
callback-after-refresh SBUxMethod.refresh('모델명') 을 통해 호출했을 시 spinner 를 재구성한 후에 호출할 callback 함수를 등록하는 콜백함수 n, s
callback-before-select 버튼 조작으로 값 변경 전에 호출할 callback 함수를 등록하는 콜백함수 n, s
callback-after-select 버튼 조작으로 값 변경 전에 호출할 callback 함수를 등록하는 콜백함수 n, s
callback-change 버튼 조작 및 input change 이벤트 발생 시 호출할 callback 함수를 등록하는 속성 n, s
onclick 클릭시 이벤트 n, s
ondblclick 더블 클릭시 이벤트 n, s

주요 API 사항

API 명 설명 / 유형(n:normal) 비고
SBUxMethod.set 값을 입력 n, s
SBUxMethod.get 저장된 값 호출 n, s
SBUxMethod.refresh 재호출 n, s
SBUxMethod.hide 감추기 n, s
SBUxMethod.show 보이기 n, s
SBUxMethod.getSpinnerFormattedData data-type="date" 또는 "time" 에 한하여 date-format, time-format 속성으로 적용된 형태의 스피너 데이터를 반환 n, s