일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- #솔루션
- #뉴스
- 해피CGI
- #해피CGI
- 홈페이지
- php
- jquery
- CGIMALL
- #웹솔루션
- 이미지
- #홈페이지제작
- 솔루션
- 사이트제작
- #happycgi
- #cgimall
- #업종별
- javascript
- #CSS
- 게시판
- #image
- #홈페이지
- #동영상
- happycgi
- 해피씨지아이
- 웹솔루션
- #이미지
- #jQuery
- 홈페이지제작
- #쇼핑몰
- CSS
- Today
- Total
웹솔루션개발 25년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 스와이프로 닫는 토스트 알림 플러그인 - jQuery swipetoast 본문
웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] 스와이프로 닫는 토스트 알림 플러그인 - jQuery swipetoast
해피CGI윤실장 2025. 4. 18. 09:09- 소개
swipetoast는 기존 클릭 상호작용과의 호환성을 유지하면서도 스와이프 제스처를 구현하여 알림을 해제하는 가볍지만 강력한 jQuery 토스트 알림 플러그인입니다.
스와이프 처리가 initSwipeHandler메서드에 의해 관리됩니다.
이것은 표준 touchstart, touchmove, touchend(및 해당 마우스 이벤트 동등 항목)을 사용하여 사용자의 스와이프 제스처를 추적합니다. 스와이프한 거리를 계산하고 그에 따라 토스트의 를 조정합니다.
transform. opacity스와이프 거리가 임계값(옵션을 통해 구성 가능)을 초과하면 swipeThreshold토스트가 닫힙니다.
CSS 전환을 사용하여 매끄러운 애니메이션을 구현하고 브라우저의 기본 제공 기능을 활용한다는 점이 마음에 듭니다.
- 라이센스
MIT
- 사용 방법
1. 문서에 최신 jQuery 라이브러리가 로드되었는지 확인하세요. 그런 다음 SwipeToast의 CSS 및 JavaScript 파일을 포함합니다
2. 화면 하단 중앙에 나타나 4초 후에 사라지는 기본 토스트 알림을 만듭니다.
3. 다음 옵션을 사용하여 토스트의 동작과 모양을 사용자 지정하세요.
옵션 설명은 사이트를 참고하세요.
- 작동 화면
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] 텍스트 하이라이트 플러그인 - advanced-mark.js (0) | 2025.04.28 |
---|---|
[해피CGI][cgimall] Crossy Road with three (0) | 2025.04.22 |
[해피CGI][cgimall] 진행률 막대와 애니메이션이 있는 토스트 알림 - jQuery myOwnUIToaster (0) | 2025.04.17 |
[해피CGI][cgimall] Selectize - 텍스트 입력과 셀렉트박스를 결합한 UI 컨트롤 플러그인 (0) | 2025.04.01 |
selectric.js v1.13.0 - 셀렉트박스 디자인 변경 Jquery 플러그인 (0) | 2025.03.31 |
Comments