일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #홈페이지제작
- 쇼핑몰
- php
- #업종별
- #CSS
- #happycgi
- happycgi
- #해피CGI
- 해피CGI
- 홈페이지제작
- #jQuery
- 웹솔루션
- #솔루션
- #웹솔루션
- 사이트제작
- javascript
- #이미지
- #뉴스
- #image
- #cgimall
- 홈페이지
- CGIMALL
- #홈페이지
- #쇼핑몰
- 해피씨지아이
- 게시판
- #동영상
- jquery
- 솔루션
- CSS
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Jquery 와 Bootstrap 를 이용한 notify(알림) 본문
웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] Jquery 와 Bootstrap 를 이용한 notify(알림)
해피CGI윤실장 2019. 11. 28. 09:00Notify는 닫기 버튼과 Font Awesome 아이콘이있는 Bootstrap 알림 표시 줄을 만드는 가벼운 jQuery 플러그인입니다.
플러그인을 사용하면 다른 jQuery / JavaScript 이벤트에서 여러 동적 알림을 트리거 할 수 있습니다.
가까운 오류, 성공, 정보 및 경고 알림 메시지를 사용자에게 쉽게 표시 할 수 있습니다.
또한 이러한 CSS3 스타일 알림 바는 최상의 사용자 경험을 제공합니다.
알림 메시지는 자동으로 사라지지만 수동으로 닫을 수도 있습니다.
라이센스는 MIT 라이센스 입니다.
1.라이브러리 및 CSS를 호출하세요.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/notify.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/notify.min.js"></script>
2.버튼을 하나 만들어 보세요.
<button id="btn-test" class="btn btn-sm btn-block btn-primary">클릭해주세요.</button>
3.버튼에 각종 이벤트를 걸어 보세요.
jQuery / JavaScript 이벤트 (click, mouseenter, mousemove, mouseleave, submit 등)를 사용하여 알림을 표시 할 수 있습니다.
$('#btn_test').on('click',function(){ notify('bell','Title of the message!','This is a sample message! Lorem ipsum!'); });
4.결과를 확인해 보세요.
5.notify 종류는 여러가지가 있고 커스텀도 가능 합니다.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] TEXTAREA 글자수 제한 JQuery 플러그인 (0) | 2019.12.02 |
---|---|
[해피CGI][cgimall] 내용에 맞게 TEXTAREA 높이 자동 조절 JQuery 플러그인 - auto-resize.js (0) | 2019.11.29 |
[해피CGI][cgimall] jQuery Modally (Nested Modal) (0) | 2019.11.27 |
[해피CGI][cgimall] 간단하게 다양한 옵션으로 보여주는 Datapicker (0) | 2019.11.25 |
[해피CGI][cgimall] 크기가 달라지며 색이 변하는 버튼 효과 (0) | 2019.11.22 |
Comments