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 ) );
});