Component

Spinner

Basic

Spinner는 버튼으로 숫자를 증감 시킬 수 있는 컴포넌트입니다. class="Spinner"

<div class="Spinner">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>

Keyboard Support

키보드를 통해서 Spinner를 제어할 수 있습니다. Key 정보는 아래와 같습니다.

Keyboard	설명	비고
↑(Up)	step 만큼 숫자 증가	value가 있을 경우에
↓(Down)	step 만큼 숫자 감소	value가 있을 경우에
←(Left)	왼쪽 input 창으로 이동	Time, Date Spinner
→(Right)	오른쪽 input 창으로 이동	Time, Date Spinner

Attributes

class

"Spinner"
- Alopex UI spinner 컴포넌트를 사용한다고 명시하는 속성입니다.

data-intervalrate 2.10.15+

Type: {number}
- 증감 버튼을 계속 누르고 있을때 숫자가 증가하는 속도 조절
- 70 (default)

data-max

Type: {number}
- value의 최대값을 지정합니다.

data-min

Type: {number}
- value의 최소값을 지정합니다.

data-pushincrease 2.10.15+

Type: {boolean}
- 증감 버튼을 계속 누르고 있을때 숫자가 증가하는 기능의 사용여부를 설정합니다.
- false (default)

<div class="Spinner" data-pushincrease="true">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>

data-step

Type: {number}
- value가 증가/감소하는 양을 지정합니다.
- 1 (default)

<div class="Spinner" data-min="1" data-max="200" data-step="2">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>

data-value-type 2.11.2+

Type: {string}
- 'string'으로 지정할 경우 문자열의 형태로 set/get이 설정됩니다.

Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

Functions

.getOptions() 3.0.0+

Spinner에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Spinner에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Spinner에 설정된 모든옵션값을 가져옵니다.
$('#Spinner').getOptions();

.getValue() 2.10.15+

입력된 Spinner 아이템의 value를 가져오는 API입니다.

Return {string | object}
- 일반 Spinner {string}
  - Spinner에 입력된 value를 string으로 리턴합니다.
- Time Spinner {object | string}
  - Time Spinner에 입력된 value를 object or string형태로 리턴합니다.
- Date Spinner {object | string} 2.11.0+
  - Date Spinner에 입력된 value를 object or string형태로 리턴합니다.

.setEnabled (isEnabled)

Spinner의 활성화/비활성화를 동적으로 조정할 때 사용하는 API입니다.

Parameters
- isEnabled {Boolean} Required
  - 설정된 Boolean 값에 의해서 spinner가 활성화/비활성화 됩니다.

<div class="Spinner" id="setEnabledSpinner" data-pushincrease="true">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<button class="Button" id="setTrue">setEnabled</button>
<button class="Button" id="setFalse">setDisabled</button>

$('#setTrue').on('click', function(){
	$('#setEnabledSpinner').setEnabled(true);
});
$('#setFalse').on('click', function(){
	$('#setEnabledSpinner').setEnabled(false);
});

.setOptions(options) 3.0.0+

Spinner에 동적으로 옵션을 설정합니다.

Parameters
- options {object}
  - Spinner에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Spinner').setOptions({
	min: 0,
	max: 100
});

.setValue(value) 2.10.15+

컴포넌트의 value를 설정하는 API 입니다.

Parameters
- 일반 Spinner
  - value {number | string} Required
- Time Spinner
  - value {object} Required
    - hour {number | string}
      - 시간 데이터를 설정합니다.
    - minute {number | string}
      - 분 데이터를 설정합니다.
    - second {number | string} 2.11.0+
      - 초 데이터를 설정합니다.
    - ampm {string} Optional
      - 오전/오후 데이터를 설정합니다.
  - value {DateObject} Required 2.11.0+
  - value {string} Required 2.11.2+
- Date Spinner 2.11.0+
  - value {object} Required
    - year {number | string}
      - 년도 데이터를 설정합니다.
    - month {number | string}
      - 월 데이터를 설정합니다.
    - date {number | string}
      - 날짜 데이터를 설정합니다.
  - value {DateObject} Required
  - value {string} Required 2.11.2+

일반 Spinner

Time Spinner

: :

Date Spinner

- -

<div class="Spinner" id="spinner_getsetVal" data-pushincrease="true">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>

<button id="btn_getVal" class="Button">getValue</button>
<button id="btn_setVal" class="Button">setValue</button>
<br><br>

<div class="Spinner Time" id="timespinner_getsetVal" data-locale="en" data-bind="spinner: time" data-pushincrease="true">
	<input data-hour>
	<span data-seperator>:</span>
	<input data-minute>
	<span data-seperator>:</span>
	<input data-second>
	<input data-ampm>
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<Button id="btn_getTimeVal" class="Button">getValue</Button>
<Button id="btn_setTimeVal1" class="Button">setValue(Object)</Button>
<Button id="btn_setTimeVal2" class="Button">setValue(DateObject)</Button>
<br><br>

<div class="Spinner Date" id="datespinner_getsetVal" data-bind="spinner: date" data-minyear="1900" data-maxyear="2100" data-pushincrease="true">
	<input data-year value="2018">
	<span data-seperator>-</span>
	<input data-month value="09">
	<span data-seperator>-</span>
	<input data-date value="13">
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<Button id="btn_getDateVal" class="Button">getValue</Button>
<Button id="btn_setDateVal1" class="Button">setValue(Object)</Button>
<Button id="btn_setDateVal2" class="Button">setValue(DateObject)</Button>

$('#btn_getVal').on('click', function(){
	var val = $('#spinner_getsetVal').getValue();
	alert(val);
});
$('#btn_setVal').on('click', function(){
	var val = $('#spinner_getsetVal').setValue('5');
});

$('#btn_getTimeVal').on('click', function(){
	var timeObj = $('#timespinner_getsetVal').getValue();
	alert(timeObj.hour + ':' + timeObj.minute + ':' + timeObj.second + ' ' + timeObj.ampm);
});
$('#btn_setTimeVal1').on('click', function(){
	var timeObj = {
		hour: 9,
		minute: 31,
		second: 24,
		ampm: 'PM'
	}
	$('#timespinner_getsetVal').setValue(timeObj);
});
$('#btn_setTimeVal2').on('click', function(){
	$('#timespinner_getsetVal').setValue(new Date());
});

$('#btn_getDateVal').click(function() {
	alert(JSON.stringify($("#datespinner_getsetVal").getValue()));
});
$('#btn_setDateVal1').click(function() {
	$("#datespinner_getsetVal").setValue({ year:'2018', month:'09',date:'20'});
});
$('#btn_setDateVal2').click(function() {
	$("#datespinner_getsetVal").setValue(new Date);
});

일반 Spinner

<div class="Spinner" id="spinner_getsetData" data-bind="spinner:num" data-pushincrease="true">
	<input value="0">
	<a class="Up"></a>
	<a class="Down"></a>
</div>

<button id="btn_getData" class="Button">getValue</button>
<button id="btn_setData" class="Button">setValue</button>
<br><br>

$('#btn_getData').on('click', function(){
	alert(JSON.stringify($("#spinner_getsetData").getData()));
});
$('#btn_setData').on('click', function(){
	var data = {
		num: '4'
	};
	$('#spinner_getsetData').setData(data);
});

Time Spinner 2.3.6.5+

시간을 입력 할 수 있는 Time Spinner 입니다. Class에 Time을 추가하고 하위의 input 엘리먼트의 역할을 속성으로 명시해주어야 정상적으로 작동합니다.

data-ampm

시간대(AM,PM)을 나타내는 input 태그에 명시

data-automation 2.11.1+

Type: {Boolean}
- "false" (default)
- "true"
  - 시간을 Up, Down 키로 조절 시, 상위 단위의 시간이 같이 변경되게 합니다.
  - ex. 시/분 10:59 상태에서 Up 키를 통해 분 단위를 증가시키면, 시간은 11:00 가 됩니다.

: :

<div class="Spinner Time" id="timespinner_automation" data-automation="true" data-locale="en" data-bind="spinner: time" data-pushincrease="true">
	<input data-hour>
	<span data-seperator>:</span>
	<input data-minute>
	<span data-seperator>:</span>
	<input data-second>
	<input data-ampm>
	<a class="Up"></a>
	<a class="Down"></a>
</div>

data-hour

시간을 나타내는 input 태그에 명시

data-hours

Type: {string}
- 시간 표기 방식을 설정합니다.
- "12H" (default)
  - 12시간을 표기하는 방식입니다.
- "24H"
  - 24시간을 표기하는 방식입니다.

data-locale

Type: {string}
- 시간대를 표현하는 텍스트의 언어를 설정합니다.

locale	value
'ko' (default)	'오전' / '오후'
'en'	'am' / 'pm'
'zh'	'上午' / '下午'
'ja'	'午前' / '午後'

data-minute

분을 나타내는 input 태그에 명시

data-second 2.11.0+

초를 나타내는 input 태그에 명시

data-seperator

시간과 분 사이의 구분자를 넣어줄 span 태그에 명시

data-locale="en" data-hours="12H"

: :

data-locale="ko" data-hours="24H"

: :

<div class="Spinner Time" data-locale="en" id="time1" data-bind="spinner: time" data-pushincrease="true">
	<input data-hour>
	<span data-seperator>:</span>
	<input data-minute>
	<span data-seperator>:</span>
	<input data-second>
	<input data-ampm>
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<div class="Button" id="setDataBtn">setData({time:new Date()})</div>
<div class="Button" id="getDataBtn">getData</div>
<br/>
<div class="Spinner Time" data-locale="ko" data-hours="24H" id="time2" data-bind="spinner: time">
	<input data-ampm>
	<input data-hour>
	<span data-seperator>:</span>
	<input data-minute>
	<span data-seperator>:</span>
	<input data-second>
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<div class="Button" id="setDataBtn2">setData({time:object})</div>
<div class="Button" id="getDataBtn2">getData()</div>

$('#setDataBtn').on('click', function(){
	$('#time1').setData({time : new Date});
});
$('#getDataBtn').on('click', function(){
	alert("getData : " + JSON.stringify($('#time1').getData()));
});
$('#setDataBtn2').on('click', function(){
	var timeObj = {
		hour: 9,
		minute: 28,
		second: 34,
		ampm: 'PM'
	}
	$('#time2').setData({time : timeObj});
});
$('#getDataBtn2').on('click', function(){
	alert("getData : " + JSON.stringify($('#time2').getData()));
});

data-time-focus 2.11.3+

Type: {String}
- 컴포넌트가 렌더링 후 바로 up/down 버튼을 눌렀을 때 값이 변동되는 input을 설정할 수 있습니다.
- null (default)
- 'hour' | 'minute' | 'second' | 'ampm'

data-time-format 2.11.2+

Type: {String}
- data-value-type을 'string'으로 설정시에 데이터 포맷을 설정합니다.
- HH:시간,mm:분,ss:초,aa:AMPM (예시:HHmmssaa)

: :

<div class="Spinner Time" id="timespinner_timeformat" data-locale="en" data-bind="spinner: time" data-value-type="string" data-time-format="HHmmss" data-pushincrease="true">
	<input data-hour>
	<span data-seperator>:</span>
	<input data-minute>
	<span data-seperator>:</span>
	<input data-second>
	<input data-ampm>
	<a class="Up"></a>
	<a class="Down"></a>
	<button id="tsetDate" type="button" class="Button">setData</button>
	<button id="tgetDate" type="button" class="Button">getData</button>
	<button id="tsetValue" type="button" class="Button">setValue</button>
	<button id="tgetValue" type="button" class="Button">getValue</button>
</div>

var timeData = {
	time: '132345'
}
$('#tsetDate').on('click', function() {
	$('#timespinner_timeformat').setData(timeData);
});
$('#tgetDate').on('click', function() {
	alert(JSON.stringify($('#timespinner_timeformat').getData()));
});
$('#tsetValue').on('click', function() {
	$('#timespinner_timeformat').setValue('120159');
});
$('#tgetValue').on('click', function() {
	alert($('#timespinner_timeformat').getValue());
});

Time Spinner Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

ampm

data-ampm 참고

automation

data-automation 참고

hour

data-hour 참고

hours

data-hours 참고

locale

data-locale 참고

minute

data-minute 참고

second

data-second 참고

seperator

data-seperator 참고

timefocus

data-time-focus 참고

timeformat

data-time-format 참고

Date Spinner 2.11.0+

날짜를 입력 할 수 있는 Date Spinner 입니다. Class에 Date를 추가하고 하위의 input 엘리먼트의 역할을 속성으로 명시해주어야 정상적으로 작동합니다.

data-automation 2.11.1+

Type: {Boolean}
- "false" (default)
- 위아래로 값 조정시에 그앞의 값이 유기적으로 변경되게 설정합니다.

data-automation="true"

- -

<div class="Spinner Date" id="datespinner_automation" data-bind="spinner: date" data-minyear="1900" data-maxyear="2100" data-pushincrease="true" data-automation="true">
<input data-year value="2018">
<span data-seperator>-</span>
<input data-month value="09">
<span data-seperator>-</span>
<input data-date value="13">
<a class="Up"></a>
<a class="Down"></a>
</div>

data-date

날짜를 나타내는 input 태그에 명시

data-date-focus 2.11.3+

Type: {String}
- 컴포넌트가 렌더링 후 바로 up/down 버튼을 눌렀을 때 값이 변동되는 input을 설정할 수 있습니다.
- null (default)
- 'year' | 'month' | 'date'

data-date-format 2.11.2+

Type: {String}
- data-value-type을 'string'으로 설정시에 데이터 포맷을 설정합니다.
- yyyy:년,MM:월,dd:일 (예시:yyyyMMdd)

/ /

<div class="Spinner Date" id="datespinner_dateformat" data-bind="spinner: date" data-value-type="string" data-date-format="yyyyMMdd">
	<input data-year value="2018">
	<span data-seperator>/</span>
	<input data-month value="09">
	<span data-seperator>/</span>
	<input data-date value="13">
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<button id="dsetDate" type="button" class="Button">setData</button>
<button id="dgetDate" type="button" class="Button">getData</button>
<button id="dsetValue" type="button" class="Button">setValue</button>
<button id="dgetValue" type="button" class="Button">getValue</button>

var dateData = {
	date: '20180922'
}
$('#dsetDate').on('click', function() {
	$('#datespinner_dateformat').setData(dateData);
});
$('#dgetDate').on('click', function() {
	alert(JSON.stringify($('#datespinner_dateformat').getData()));
});
$('#dsetValue').on('click', function() {
	$('#datespinner_dateformat').setValue('20151222');
});
$('#dgetValue').on('click', function() {
	alert($('#datespinner_dateformat').getValue());
});

data-maxyear

Type: {number}
- 년도의 최대값을 설정합니다.
- 2100 (default)

data-minyear

Type: {number}
- 년도의 최소값을 설정합니다.
- 1900 (default)

data-month

월을 나타내는 input 태그에 명시

data-year

년도를 나타내는 input 태그에 명시

/ /

<div class="Spinner Date" id="date1" data-bind="spinner: date" data-minyear="1900" data-maxyear="2100" data-pushincrease="true">
	<input data-year value="2018">
	<span data-seperator>/</span>
	<input data-month value="09">
	<span data-seperator>/</span>
	<input data-date value="13">
	<a class="Up"></a>
	<a class="Down"></a>
</div>
<Button id="setDateBtn" class="Button">setData({date:new Date})</Button>
<Button id="setDateBtn2" class="Button">setData({date:{ year:'2019', month:'09',date:'13'} })</Button>
<Button id="getDateBtn" class="Button">getData()</Button>

$('#setDateBtn').click(function() {
	$("#date1").setData({date:new Date});
});
$('#setDateBtn2').click(function() {
	$("#date1").setData({date:{ year:'2018', month:'09',date:'13'} });
});
$('#getDateBtn').click(function() {
	alert(JSON.stringify($("#date1").getData()));
});

Date Spinner Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

automation

data-automation 참고

date

data-date 참고

datefocus

data-date-focus 참고

dateformat

data-date-format 참고

maxyear

data-maxyear 참고

minyear

data-minyear 참고

month

data-month 참고

year

data-year 참고

다국어 설정 2.10.4+

setup 자바스크립트에서 Spinner 다국어 설정을 공통으로 설정합니다.

locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.

$a.setup('spinner', {
	locale : 'ko'
});

locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'

본문 상단으로 이동

Component

Spinner

Keyboard Support

class

data-intervalrate 2.10.15+

data-max

data-min

data-pushincrease 2.10.15+

data-step

data-value-type 2.11.2+

intervalrate

max

min

pushincrease

step

valuetype

.getOptions() 3.0.0+

.getValue() 2.10.15+

.setEnabled (isEnabled)

.setOptions(options) 3.0.0+

.setValue(value) 2.10.15+

data-ampm

data-automation 2.11.1+

data-hour

data-hours

data-locale

data-minute

data-second 2.11.0+

data-seperator

data-time-focus 2.11.3+

data-time-format 2.11.2+

ampm

automation

hour

hours

locale

minute

second

seperator

timefocus

timeformat

data-automation 2.11.1+

data-date

data-date-focus 2.11.3+

data-date-format 2.11.2+

data-maxyear

data-minyear

data-month

data-year

automation

date

datefocus

dateformat

maxyear

minyear

month

year