안녕하세요. 명월입니다.
이 글은 알람 메시지 라이브러리(toastr 라이브러리)에 관한 글입니다.
사실 알람 메시지는 Javascript에서 alert 함수로 사용할 수 있습니다. 그러나 alert 함수는 호출될 때 스크립트가 멈추기도 하고 비동기(setTimeout)을 사용할 수도 있습니다만 먼저 모양이 이쁘지가 않습니다.
이걸 좀 이쁘게 또 부트스트랩의 디자인과 비슷한 알람 라이브러리가 toastr 라이브러리입니다.
링크 - https://github.com/CodeSeven/toastr
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- toastr css 라이브러리 -->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- toastr js 라이브러리 -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
// 알람 메시지
toastr.success("알람 메시지");
</script>
</body>
</html>
toastr에서 메시지를 호출하는 함수는 다음과 같습니다.
| 함수명 | 예제 |
|---|---|
| toastr.info | |
| toastr.success | |
| toastr.warning | |
| toastr.error |
함수의 파라미터는 다음과 같이 사용할 수 있습니다.
toastr.info('타이틀', '내용', {timeOut: 5000});
그 밖의 함수로는 remove와 clear가 있습니다.
// fadeout 효과없이 바로 메시지 창을 제거
toastr.remove()
// fadeout 효과로 메시지창을 닫기
toastr.clear()
그리고 옵션으로는 다음과 같습니다.
// escapeHtml 허용여부
toastr.options.escapeHtml = true;
// closeButton을 생성여부
toastr.options.closeButton = true;
// closeButton의 커스텀
toastr.options.closeHtml = '';
// 메시지 창이 사라질 때의 애니메이션 효과
toastr.options.closeMethod = 'fadeOut';
// 메시지 창의 애니메이션 효과 시간
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
// 새로운 창의 위치, true이면 가장 위 포지션, false면 가장 아래 포지션
toastr.options.newestOnTop = false;
// 이벤트 옵션
// 추가될 때 이벤트
toastr.options.onShown = function() { console.log('hello'); }
// 사라질 때 이벤트
toastr.options.onHidden = function() { console.log('goodbye'); }
// 클릭될 때 이벤트
toastr.options.onclick = function() { console.log('clicked'); }
// 닫기 버튼이 눌릴 때 이벤트
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
// 메시지 중복 허용 여부, 두개 이상 메시지가 생성될 때 이 전꺼는 사라짐
toastr.options.preventDuplicates = true;
// 메시지가 표시되는 시간
toastr.options.timeOut = 30;
// 메시지 위로 커서를 올렸을 때 표시되는 시간
toastr.options.extendedTimeOut = 60;
// 만약 메시지 표시되는 시간과 올렸을 때 표시되는 시간을 0으로 하면 메시지는 사라지지 않는다.
// 프로그래스바 표시 여부
toastr.options.progressBar = true;
// 글자를 오른쪽 정렬 여부
toastr.options.rtl = true;
//애니메이션 설정 여부
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
최종 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
</head>
<body>
<button id="example">최종 예제</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
$("#example").on("click", function(){
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.info('예제', '명월일지', {timeOut: 5000});
});
</script>
</body>
</html>
저같은 경우는 이 toastr를 굉장히 자주 사용합니다. 일단 편하기도 하고 라이브러리 자체가 너무 심플해서 있습니다. 다른 사람들은 어떨지 모르겠습니다만, 이런 좋은 라이브러리는 많이 사용되면 좋겠네요.
여기까지 알람 메시지 라이브러리(toastr 라이브러리)에 관한 내용였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] 그래프 오픈 라이브러리(jqplot) (0) | 2020.02.24 |
|---|---|
| [Javascript] 브라우져 화면 캡쳐 라이브러리(html2canvas) (0) | 2019.11.22 |
| [Javascript] Select2 (Select searching, multiselect, ajax) (0) | 2019.08.27 |
| [Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리) (0) | 2019.08.22 |
| Google OAuth 사용법 (0) | 2019.06.18 |
| [CSS] 구글 폰트 (Google font) 이용하기 (0) | 2019.05.31 |
| JqGrid (0) | 2015.07.14 |
| Jquery Mobile (0) | 2015.07.13 |