본문바로가기

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

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

data-max

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

data-min

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

data-pushincrease

  • 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

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

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

intervalrate

max

min

pushincrease

step

valuetype

Functions

.getOptions()

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

  • Return {object}
    • object
      • Spinner에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//Spinner에 설정된 모든옵션값을 가져옵니다.
$('#Spinner').getOptions();

.getValue()

입력된 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}
      • 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)

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

  • Parameters
    • options {object}
      • Spinner에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#Spinner').setOptions({
	min: 0,
	max: 100
});

.setValue(value)

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

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

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

data-ampm

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

data-automation

  • 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

  • 초를 나타내는 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

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

data-time-format

  • 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

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

ampm

automation

hour

hours

locale

minute

second

seperator

timefocus

timeformat

Date Spinner

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

data-automation

  • 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

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

data-date-format

  • 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

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

automation

date

datefocus

dateformat

maxyear

minyear

month

year

다국어 설정

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

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

$a.setup('spinner', {
	locale : 'ko'
});
  • locale {string}
    • 'ko'(default) | 'en' | 'zh' | 'ja'