Component
Spinner
Spinner는 버튼으로 숫자를 증감 시킬 수 있는 컴포넌트입니다. class="Spinner"
Keyboard Support
키보드를 통해서 Spinner를 제어할 수 있습니다. Key 정보는 아래와 같습니다.
Keyboard | 설명 | 비고 |
---|---|---|
↑(Up) | step 만큼 숫자 증가 | value가 있을 경우에 |
↓(Down) | step 만큼 숫자 감소 | value가 있을 경우에 |
←(Left) | 왼쪽 input 창으로 이동 | Time, Date Spinner |
→(Right) | 오른쪽 input 창으로 이동 | Time, Date Spinner |
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이 설정됩니다.
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
intervalrate
max
- data-max 참고
min
- data-min 참고
pushincrease
step
- data-step 참고
valuetype
.getOptions()
Spinner에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Spinner에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//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형태로 리턴합니다.
- 일반 Spinner {string}
.setEnabled (isEnabled)
Spinner의 활성화/비활성화를 동적으로 조정할 때 사용하는 API입니다.
- Parameters
- isEnabled {Boolean} Required
- 설정된 Boolean 값에 의해서 spinner가 활성화/비활성화 됩니다.
- isEnabled {Boolean} Required
<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로 가지는 오브젝트를 입력합니다.
- options {object}
$('#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
- 오전/오후 데이터를 설정합니다.
- hour {number | string}
- value {DateObject} Required
- value {string} Required
- value {object} Required
- Date Spinner
- value {object} Required
- year {number | string}
- 년도 데이터를 설정합니다.
- month {number | string}
- 월 데이터를 설정합니다.
- date {number | string}
- 날짜 데이터를 설정합니다.
- year {number | string}
- value {DateObject} Required
- value {string} Required
- value {object} Required
- 일반 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);
});
<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 입니다. 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 태그에 명시
<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());
});
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
ampm
- data-ampm 참고
automation
hour
- data-hour 참고
hours
- data-hours 참고
locale
- data-locale 참고
minute
- data-minute 참고
second
- data-second 참고
seperator
timefocus
timeformat
날짜를 입력 할 수 있는 Date Spinner 입니다. Class에 Date를 추가하고 하위의 input 엘리먼트의 역할을 속성으로 명시해주어야 정상적으로 작동합니다.
data-automation
- Type: {Boolean}
- "false" (default)
- 위아래로 값 조정시에 그앞의 값이 유기적으로 변경되게 설정합니다.
<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()));
});
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
automation
date
- data-date 참고
datefocus
dateformat
maxyear
- data-maxyear 참고
minyear
- data-minyear 참고
month
- data-month 참고
year
- data-year 참고
setup 자바스크립트에서 Spinner 다국어 설정을 공통으로 설정합니다.
locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.
$a.setup('spinner', {
locale : 'ko'
});
- locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'