[plugin]Bootstrap Notify

Bootstrap Notify

참조 : http://bootstrap-notify.remabledesigns.com/

기본적인 사용법을 알아보겠습니다. $(function(){ // 기본 옵션을 설정 한뒤 호출시 재정의 하여 사용합니다. $.notifyDefaults({ placement: { from: "bottom", align: "left" }, animate:{ enter: "animated bounceIn", exit: "animated fadeOutDown" }, template:'<div data-notify="container" class="col-xs-11 col-sm-3 p-3 text- center alert alert-{0}" role="alert">' + '<img data-notify="icon" class="img-circle pull-left">' + '<span data-notify="title">{1}</span>' + '<span data-notify="message">{2}</span>' + '</div>' }); });

24

 

1

기본적인 사용법을 알아보겠습니다.

2

3

  $(function(){

4

        // 기본 옵션을 설정 한뒤 호출시 재정의 하여 사용합니다.

5

        $.notifyDefaults({

6

            placement: {

7

                from: "bottom",

8

                align: "left"

9

            },

10

            animate:{

11

                enter: "animated bounceIn",

12

                exit: "animated fadeOutDown"

13

            },

14

            template:'<div data-notify="container" class="col-xs-11            col-sm-3 p-3 text-center alert alert-{0}" role="alert">' +

15

            '<img data-notify="icon" class="img-circle pull-left">' +

16

            '<span data-notify="title">{1}</span>' +

17

            '<span data-notify="message">{2}</span>' +

18

            '</div>'

19

20

        });

21

22

    });

23

24

페이지에서 사용

// 메세지 와 스타일을 재정의 하여 호출합니다. $.notify({message: '안내합니다.'},{type: 'danger'});

3

 

1

// 메세지와 스타일을 재 정의 하여 호출합니다.

2

$.notify({message: '안내합니다.'},{type: 'danger'});

3

type : 'danger' 일 경우 스타일입니다.

( 자세한사항은 플러그인 사이트 에서 확인부탁드립니다. )

옵션이 많이 있어 좀더 커스텀 하여 사용 가능 할듯 합니다.