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