웹솔루션개발 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. 
다음 옵션을 사용하여 토스트의 동작과 모양을 사용자 지정하세요.
옵션 설명은 사이트를 참고하세요.









- 작동 화면


 

Comments