AX5UI - toast를 사용한 시스템 메세지 출력하기

AX5UI-toast는 웹 애플리케이션 화면상에서 시스템 메세지를 보여주는 라이브러리이다.
메세지를 출력하면 화면상의 지정된 장소에 메세지가 지정된 시간동안 보여진 다음에 자동으로 사라집니다.
예제 소스는 글 하단에 첨부하여 두였다.

사용하는 방법을 알아보자. 

1. 필요한 라이브러리들
- jQuery 1.x 이상이 필요하다.
- ax5core 라이브러리가 필요하다.
- ax5toast 라이브러리가 필요하다.
- ax5toast 스타일 시트가 필요하다.
- 샘플에 나오는 테마와 ICON을 사용하기 위해서는 Font Awesome 스타일 시트가 필요하다.

<link rel='stylesheet' type='text/css' href='https://cdn.rawgit.com/ax5ui/ax5ui-toast/master/dist/ax5toast.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/ax5ui/ax5ui-toast/master/dist/ax5toast.min.js'></script>

2. toast 객체를 생성한다.
$(document.body).ready(function () {
    var toast = new ax5.ui.toast({
        msg: 'String',
        theme: 'String',
        width: 'Number', 
        icon: 'String',
        closeIcon: 'String',
        onStateChanged: 'Function',
        displayTime: 'Number',
        animateTime: 'Number',
        containerPosition: 'String',
        lang: 'Object'
    });
});

- msg : 보여질 메세지 이다.
생성시에는 의미가 없다.
- theme : 미리 정의된 색상을 사용할 수 있다.
Font Awesome 스타일 시트를 사용한다.
사용할 수 있는 값은 default, primary, success, info, warning, danger 이다.
- width : 메세지창 너비(기본값: 300)
- icon: 메세지 앞에 아이콘을 출력한다.
Font Awesome 스타일 시트를 사용한다.
(예, <i class='fa fa-bell'></i>)
- closeIcon: 메세지 창을 닫는 아이콘을 지정한다.
(예, <i class='fa fa-times'></i>)
- onStateChanged: 창이 열릴때, 닫힐때 의 상태가 바뀔때 호출되는 함수를 지정한다.
- displayTime: 메세지창이 보여지는 시간이다.
기본값은 3000 ms 이다.
- animateTime: 메세지창이 열리고, 닫힐때 애니메이션 되는 시간이다.
기본값은 300 ms 이다.
- containerPosition: 메세지 창이 보여질 위치를 지정한다.
사용 가능한 값은 top-left, top-right, bottom-left, bottom-right 이다.
기본값은 bottom-left이다.
- lang: 'OK' 버튼의 값을 바꿉니다.
(lang: { 'ok': '확인'})


3. 메세지를 출력한다.
$(document.body).ready(function () {
    $('#toast-push').click(function () {
        toast.push('메세지를 출력한다.
');
    });
});


- push 함수를 사용해서 메세지를 출력한다.

toast.push('메세지를 출력한다.
');

- 메세지 출력시 콜백 함수를 지정한다.

toast.push('메세지를 출력한다.
', function(){
    console.log(this);
});

- 메세지 출력시 다른 설정들을 지정한다.

toast.push(
    {
        msg: '메세지를 출력한다.
',
        icon: '<i class='fa fa-bell'></i>'
    },
    function() {
        console.log(this);
    }
);


4. confirm 메세지를 출력한다.
- 메세지창이 자동으로 닫히지 않고, 'OK' 버튼을 눌러야 닫힙니다.

toast.confirm(
    {
        msg: '메세지를 출력한다.
',
        onStateChanged: function () {
            console.log(this);
        }
    }, function () {
        console.log(this);
    }
);


5. 메세지에 아이콘을 같이 출력한다.
(Font Awesome 스타일 시트 사용)
toast.confirm({
    icon: '<i class='fa fa-bell'></i>',
    containerPosition: 'top-right',
    msg:'메세지를 출력한다.
'
});


toast.push({
    theme: 'danger',
    icon: '<i class='fa fa-bug'></i>',
    msg: 'Toast message'
});


6. 테마를 적용한다.(Font Awesome 스타일 시트 사용)

$('.toast-theme').click(function () {
    var theme = $(this).attr('id');
    toast.confirm({
        theme: theme,
        icon: '<i class='fa fa-bell'></i>',
        msg: theme + ' color'
    }, function () {
        console.log(this);
    });
});


7. 설정을 동적으로 변경하기

- 이미 생성한 toast 객체의 설정을 변경하는 함수 이다.
toast.setConfig({
    icon: '<i class='fa fa-bell'></i>',
    containerPosition: 'bottom-right',
    closeIcon: '<i class='fa fa-times'></i>'
});

※ 예제소스
 toast.zip