1. 이제 alert 대신 toastr 사용하자 ! Toastr 사용 하기
    1. toastr 이란 ?

이제 alert 대신 toastr 사용하자 ! Toastr 사용 하기

작성: 2021.06.04

수정: 2023.04.12

읽는시간: 04 분

Programming/javascrlpt

반응형
1

https://github.com/CodeSeven/toastr
toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

toastr 이란 ?

toastr 은 non-blocking 알람을 띄우는 Javasript 라이브러리 입니다. jQuery 가 필요합니다

여러가지 다양한 옵션을 줄 수 있지만 간단하게 사용 할 수 있도록 쉽게 설명을 해 드리겠습니다.

html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
    <button id="btn">테스트</button>
</div>
 
<script type="text/javascript">
    $('#btn').on('click', function(){
        alert('hi');
    });
</script>
 
</body>
</html>

먼저 위의 기본적인 html 코드를 실행해보면

img

정말 기본적으로, '테스트' 버튼을 눌렀을때 hi 라는 alert를 띄워줍니다.

이제 toastr 을 사용하기 위해 일단 css 와 js 파일을 등록 해줍니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

그러고 단순히 alert 를 toastr.success 로 바꿔서 다시 똑같은 테스트를 해봅니다.

html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
    <button id="btn">테스트</button>
</div>
 
<script type="text/javascript">
    $('#btn').on('click', function(){
        toastr.success('hi');
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
</body>
</html>

img

여러번 클릭 했더니 우측 상단에 hi 알림이 여러개 나왔습니다.

error, warning, succeess, info 가 사용 가능합니다.

img

toastr.option 으로 초기 설정을 해줄 수 있습니다.

progressBar : true 로 두고 , timeout을 줄여보았습니다.

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

버튼을 클릭할때마다 지정한 시간만큼 잠깐 나왔다가 사라지는 것을 확인 할 수 있습니다.

위에서 테스트 용으로 작성한 코드를 아래에 예제로 남겨둘 테니 확인해보시고 사용해보시면 어렵지 않게 응용 할 수 있을 겁니다.

html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8">
<style>
button{
    font-size : 5em;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div>
    <button id="error">error</button>
    <button id="warning">warning</button>
    <button id="success">success</button>
    <button id="info">info</button>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    toastr.options = {
              "closeButton": false,
              "debug": false,
              "newestOnTop": false,
              "progressBar": true,
              "positionClass": "toast-top-right",
              "preventDuplicates": false,
              "onclick": null,
              "showDuration": "100",
              "hideDuration": "1000",
              "timeOut": "1500",
              "extendedTimeOut": "1000",
              "showEasing": "swing",
              "hideEasing": "linear",
              "showMethod": "fadeIn",
              "hideMethod": "fadeOut"
            }
 
    $('#error').on('click', function(){
        toastr.error('error');
    });
    $('#warning').on('click', function(){
        toastr.warning('warning');
    });
    $('#success').on('click', function(){
        toastr.success('success');
    });
    $('#info').on('click', function(){
        toastr.info('info');
    });
</script>
 
</body>
</html>
반응형
저작자표시

'Programming > javascrlpt' 카테고리의 다른 글

btoa 혹은 atob 사용해 BASE64 <-> UTF-8 인코딩 할때 한글 깨짐 해결  (0) 2021.06.11
jQuery contextMenu를 활용해 우클릭 메뉴 만들기  (0) 2021.06.05
TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor)  (0) 2021.06.01
JavaScript 드래그 할 수 있는 HTML 요소 만들기  (0) 2021.05.23
Quick template for Jquery Ajax calls  (0) 2021.05.15

'Programming/javascrlpt'의 다른글

Shane Park님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바