toastr.js 로 Toast Message 구현하기

github

https://github.com/CodeSeven/toastr

options

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

시작하기

<script src="js/jquery-3.1.1.min.js"></script>
<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
<script src="js/plugins/toastr/toastr.min.js"></script>

위 코드를 추가한다.
toastr.js에서 jquery를 사용하므로 jquery도 같이 추가한다.

toastr.success('https://projooni.tistory.com', 'Toastr success!');
toastr.info('https://projooni.tistory.com', 'Toastr info!');
toastr.warning('https://projooni.tistory.com', 'Toastr warning!');
toastr.error('https://projooni.tistory.com', 'Toastr error!');

기본적으로 위와 같이 호출한다.

toastr.options = {
                      closeButton: true,
                      progressBar: true,
                      showMethod: 'slideDown',
                      timeOut: 4000
                  };
                  toastr.success('https://projooni.tistory.com', 'Toastr success!');

옵션을 바꾸고 싶다면 이렇게 사용한다.

별거없다.
공수에 비해 깔끔한 Toast Message를 만들 수 있다.