MPopup¶
MPopup Framework 에 대한 필수 API 를 정의
Popup API¶
팝업 관련된 기능들을 제공
경고 팝업¶
-
M.pop.
alert
(setting)¶ Changed in version 2.0.0.
- Arguments
setting (Object) – 알림창 설정 정보
setting.title (String) – 알림창 타이틀
setting.message (String) – 알림창 메세지
setting.buttons (Array) – 알림창 버튼 타이틀 Array
setting.callback (Function) – 알림창 콜백 함수
-
M.pop.
callback
(index)¶ - Arguments
index (String) – 선택된 인덱스
알림 팝업을 호출한다.
- Surrogate Keys: 위 옵션키들과 같은 하위 버전 호환을 위한 대체 옵션 값들
button = buttons
msg = message
click = callback
onclick = callback
Example:
Alert Popup (Only Message)
M.pop.alert('message');
Alert Popup (Callback)
M.pop.alert('message', function(index, setting) { M.tool.log( "index", index ); console.log( "index: ", index ); });
Alert Popup (Title, Buttons)
M.pop.alert('message', { title : 'title', buttons : [ 'button0', 'button1'] });
Alert Popup(Title, Buttons, Callback)
M.pop.alert({ title: '공지', message: '메세지를 확인합니다.', buttons: ['확인', '취소'], callback: function(index) { console.log( "index: ", index ); } });
데이트 팝업¶
-
M.pop.
date
(setting)¶ Changed in version 2.0.0.
- Arguments
setting (Object) – 알림창 설정 정보
setting.dateType (String) – date picker 타입 ( HM12:MMddAM (오전/오후 1~12시 0~59분), HM24:MMdd (0~23시 0~59분), YMD:yyyyMMdd (년월일), YM:yyyyMM (년월), MMYYYY:MMyyyy (월년), YYYY:yyyy (년), MM:MM (월), DD:DD (일) )
setting.initDate (String) – date picker의 초기 date를 지정한다.(option.type에 따른 format string)
setting.minDate (String) – date picker의 하한 date를 지정한다.(option.type에 따른 format string)
setting.maxDate (String) – date picker의 하한 date를 지정한다.(option.type에 따른 format string)
setting.interval (String) – type이 HM12, HM24 일때, 분(min)의 interval을 설정 할 수 있다. 60을 나머지 없이 나눌수 있는 수만 동작한다.(ex> 10,15,30)
setting.mode (String) – type이 HM12, HM24 일 경우 설정 할 수 있다. (analog, spinner, default : analog)
setting.callback (Function) – 선택 결과 반환 콜백
-
M.pop.
callback
(status, result)¶ - Arguments
index (String) – 선택된 인덱스
데이트 피커를 호출한다.
- Surrogate Keys: 위 옵션키들과 같은 하위 버전 호환을 위한 대체 옵션 값들
type = dateType
msg = initDate
startdate = minDate
enddate = maxDate
onselect = callback
Example:
M.pop.date({
dateType : 'YMD',
initDate : '20130714',
minDate : '19790101',
maxDate : '21001231',
callback : function(result, setting) {
console.log( JSON.stringify( result ));
}
});
시간 선택 Popup (HM12)
M.pop.date({
type : 'HM12',
initDate : '1128PM'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
시간 선택 Popup (HM12+Interval)
M.pop.date({
type : 'HM12',
initDate : '1145PM',
interval : 15
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
시간 선택 Popup (HM24)
M.pop.date({
type : 'HM24',
initDate : '2330'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
시간 선택 Popup (HM12+Interval)
M.pop.date({
type : 'HM12',
initDate : '1130PM',
interval : 30
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
시간 선택 Popup (HM12+Interval+mode)
M.pop.date({
type : 'HM12',
initDate : '1130PM',
interval : 10,
mode : "spinner"
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
시간 선택 Popup (HM24+Interval+mode)
M.pop.date({
type : 'HM24',
initDate : '2330',
mode : "spinner"
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (MMYYY)
M.pop.date({
type : 'MMYYYY',
initDate : '072013'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (YYYY)
M.pop.date({
type : 'YYYY',
initDate : '2013'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (MM)
M.pop.date({
type : 'MM',
initDate : '07'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (DD)
M.pop.date({
type : 'DD',
initDate : '12'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (YMD)
M.pop.date({
type : 'YMD',
initDate : '20130723',
startDate : '19790101',
endDate : '21001231'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
날짜 선택 Popup (YM)
M.pop.date({
type : 'YM',
initDate : '201307',
startDate : '197901',
endDate : '210012'
}, function(result, setting) {
M.tool.log( result );
console.log( JSON.stringify( result ));
});
토스트 메세지¶
-
M.pop.
instance
(setting)¶ Changed in version 2.0.0.
- Arguments
setting (Object) – 알림창 설정 정보
setting.message (String) – 인스턴스 메세지
setting.showTime (String) – 보여질 시간 ( SHORT:짧게,LONG:길게 )
인스턴스 메세지를 출력한다.
- Surrogate Keys: 위 옵션키들과 같은 하위 버전 호환을 위한 대체 옵션 값들
show = showTime
time = showTime
Example:
Toast (short)
M.pop.instance({message:"메세지입니다.", showTime:'SHORT'});
Toast (normal)
M.pop.instance("message");
Toast (time)
M.pop.instance("message", {time:1000});
Toast (long)
M.pop.instance("message", {time:'LONG'});
리스트 팝업¶
-
M.pop.
list
(setting)¶ Changed in version 2.0.0.
- Arguments
setting (Object) – 알림창 설정 정보
setting.mode (String) – 복수 선택 가능 모드 플래그 ( SINGLE: 단건 선택 가능 모드, MULTI: 복수 선택 가능 모드 )
setting.title (String) – 리스트 팝업 타이틀
setting.message (String) – 리스트 팝업 메세지
setting.cancelable (String) – 팝업 취소 가능 여부
setting.buttons (Array) – 리스트 팝업 버튼 Array
setting.list (Array) – 출력 리스트 데이터, * 한개 이상의 데이터가 입력되어야 한다. ( title: 데이터 타이틀, value: 데이터 값 )
setting.selected (int) – 초기 선택 값 (Multi 모드의 경우, Array를 사용한다.)
setting.callback (Function) – 리스트 팝업 선택 콜백 함수
-
M.pop.
callback
(index, info)¶ - Arguments
index (String) – 선택된 인덱스
info (String) – 선택 정보
리스트 팝업을 호출한다.
- Surrogate Keys: 위 옵션키들과 같은 하위 버전 호환을 위한 대체 옵션 값들
select = selected
button = buttons
msg = message
onselect = callback
Example:
list 선택 popup (SINGLE)
M.pop.list({
mode : 'SINGLE',
title : '선택',
buttons : ['확인', '취소'],
list : [
{ title : '데이타0', value : 'value0'},
{ title : '데이타1', value : 'value1'},
{ title : '데이타2', value : 'value2'},
{ title : '데이타3', value : 'value3'},
{ title : '데이타4', value : 'value4'}
],
selected : 2,
callback: function (buttonIdx, rowInfo, setting){
console.log( buttonIdx, JSON.stringify( rowInfo ) );
}
});
list 선택 popup (MULTI)
M.pop.list({
mode : 'MULTI',
title : 'title',
button : ['button0', 'button1', 'button2'],
list : [
{ title : 'row0', value : 'value0'},
{ title : 'row1', value : 'value1'},
{ title : 'row2', value : 'value2'},
{ title : 'row3', value : 'value3'},
{ title : 'row4', value : 'value4'}
],
selected : [0, 2],
}, function (buttonIdx, rowInfo, setting){
console.log( buttonIdx, JSON.stringify( rowInfo ) );
});