토스트 팝업 ( toast popup ver 20251129 ) 정보
토스트 팝업 ( toast popup ver 20251129 )
관련링크
첨부파일
본문
토스트 팝업이란 전달해야 할 메세지등이 있을 때 우측 하단에서 서서히 올라오는
간단한 내용을 담는 팝업등을 말합니다
모양새가 토스터기에서 식빵이 구워져 올라오는 모양 같다해서 토스트 팝업이라 불리우고 있습니다
요즘은 휴대폰에서는 기본으로 사용되며 많은 사이트에서 간편하게 내용이나
시스템적인 메세지를 전달할 때 많이 사용되고 있습니다
자바스크립트의 알러트와 비슷한 느낌으로 사용하시면 됩니다
예를 들면 아작스등으로 서버에 접근할 수 있다면 새로운 글이나 쪽지가 있을 때
"새로운 글이 있습니다"와 같은 짧은 내용의 환기용 메세지로 사용할 수 있습니다
Toast Popup 설치 및 사용법 요약
1. 설치 방법
설치 1: 플러그인 업로드
- 다운로드한 파일의 압축을 풉니다.
- 그 안의 toast_popup 폴더를 그대로 그누보드 plugin 폴더에 업로드합니다.
- 그누보드 버전과 관계없이 범용 사용 가능.
설치 2: JS 설정 수정
- 수정 파일: toast_popup/toast_popup.js
약 63번째 줄에서 serverModuleUrl의 값인 ( http://홈주소/g5/plugin ) 을
본인이 설치한 경로로 바꾸세요
- 옵션 설정:
defaultOptions: 기본 설정
본인의 상황에 맞게 수정 하세요. 호출 함수에 옵션이 있으면 우선적용되고 없으면
기본설정이 적용됩니다
minimumOptions: 최소 설정
아래의 설치4와 같은 형태처럼 최소 설정을 할때 보여졌으면 하는 설정을
이 곳에서 하시거나 비워둬도 됩니다
설치 3: CSS/JS 등록 ( 직접 기재시 홈주소는 본인 설치한 홈주소에 맞도록 수정 )
테마 사용 시 (g5/theme/basic/head.sub.php 예시)
- 그누보드 php 안에 넣을 때
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/font-awesome/css/font-awesome.min.css">', 0);
위의 소스를 찾아 그 아래에 다음의 소스를 넣으면 됩니다
add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/toast_popup/style.css">', 0);
add_javascript('<script src="'.G5_PLUGIN_URL.'/toast_popup/toast_popup.js?ver='.G5_JS_VER.'"></script>', 0);
위 소스가 없으면 <link>와 <script>를 직접 HTML에 아래와 같이 일반적인 소스로 만들어 넣어도 됩니다
- 직접 html안에 기재시
<link rel="stylesheet" href="http://홈주소/g5/plugin/toast_popup/style.css">
<script src="http://홈주소/g5/plugin/toast_popup/toast_popup.js"></script>
설치 4: 호출
<script>
document.addEventListener("DOMContentLoaded", function() {
toastAlert("success", "사랑하였으므로 행복하였네라");
});
</script>toastAlert("토스트 팝업 타입", "메시지");토스트 팝업 타입 종류
success, info, warning, error, notification, confirm, custom
2. 데모 페이지
서버 설치시 데모 URL :
- http://홈주소/g5/plugin/toast_popup/demo/toast_popup.html
- 옵션 선택후 하단의 [사용자 정의 토스트 팝업] 버튼 클릭시 자동으로 소스 코드가 생성되므로,
복사하여 사용 가능.
- 로컬에서 확인시 폴더를 열어 toast_popup.html를 직접 페이지를 열면 됩니다
3. 버전 정보 및 주의 사항 ( 버전은 업데이트된 날짜를 의미합니다 )
이전 버전 : 20251022, 20251128
최신 버전 : 20251129
- 서버/로컬 주소 변경
- 아이콘 세트, 크기 추가
- 데모 페이지 예제 변경
- 모든 업데이트는 기존 버전을 삭제 후 설치 권장합니다.
4. 기타 안내
효과음은 웹브라우저 상황에 따라서 나오지 않을 수 있습니다
브라우저의 포커스가 되어 있는 상태 ( 클릭등이 일어난 이후 )에서만
웹브라우저 정책에 의해 사운드가 활성화가 됩니다
사용법이 자세하지 않지만, 데모 페이지에서 옵션 체크 후 실행하면 쉽게 이해 가능합니다
다운 받으시면서 좋은 댓글 한번씩만 남겨 주세요 : )
다운로드 포인트 50점은 댓글 하나가 50점인데 수고했다는 답글 하나 정도면 괜챦을거 같아
50점으로 했습니다 ㅎㅎㅎ
버그나 기타 사항은 검토후 되도록 적용 가능하게 해보겠습니다
자매품 마리 업로더 ver0.9 ( 그누보드5 멀티 업로더, 다중 파일 업로더 ) 도 있습니다 : )
https://sir.kr/g5_plugin/13534
다음은 간단한 업데이트 이력입니다 큰변화가 없으면 이 곳에서 변경해서 올리고
큰 변화가 있으면 새로운 파일을 업로드 합니다 - 25년 11월 30일
-----------------------------------------------------------------------------------------------------------
간단한 변경이 있어 파일을 11월 29일에 다시 업데이트 했습니다
- ver 20251129
- 업데이트 내용
서버 주소,로컬 주소 변경, 아이콘 셋트 작게 추가, 데모 페이지의 예제 내용 변경
- 참고 사항
다운로드 한 파일은 되도록 이전 파일을 지우고 새로 설치해 주세요
삭제시 엉뚱한 파일을 지우는 일이 없도록 조심 하세요
!-->!-->!-->!-->!-->
7
댓글 전체


감사합니다
최소 옵션인데 보기 좋게 할려면
최소 옵션에 다음과 같이 넣으면 좀 더 나은 형태가 될거 같습니다
minimumOptions : {
moveType : 'move_no',// 슬라이드 이동 방향
bellPlayedUse : 'Y', // 시작시 효과음 사용 여부 (Y/N)
fadeIn : 'Y',
fadeOut : 'Y',
progressBarUse : 'Y', // 프로그레스 바 사용안할시 N
useCloseBt : 'auto', // 닫기 버튼 없이 자동 닫기
iconX : '0px', // 아이콘 x값 위치
contentX : '30px', // 콘텐츠 x값 위치
minHeight : '50px', // 최소 높이
minWidth : '500px', // 최소 넓이
},
위와 같이만 바꿔도 모습이 더 나아질거 같습니다
항상 좋은 피드백 감사합니다 : )
아이콘 작게 부분이 추가 될 예정이니
그 부분을 고쳐서 저녁에 업데이트 하겠습니다
버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다

감사합니다

감사합니다 ^^
아이콘 작게 부분이 추가 될 예정이니
그 부분을 고쳐서 저녁에 업데이트 하겠습니다
버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다

감사 합니다.

늘 좋은 피드백 감사 드립니다 : )
아이콘 작게 부분이 추가 될 예정이니
그 부분을 고쳐서 저녁에 업데이트 하겠습니다
버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다
버전 업 추카드려요. ^^ 빵공장이 바쁘게 돌아가길 바랍니다.~~~
저도, 나중에 검토해보겠습니다.
수고하셨습니다.

감사합니다 : )
예명을 빵공장으로 해야 할까봐요 ㅎㅎㅎ

감사합니다.

감사합니다 : )

