토스트 팝업 간단히 표현하는 제이쿼리(jquery) 플러그인

2016/08/02 - [Jquery] - pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인

[소개]

토스트팝업은 주로 알림이나 경고를 나타낼때 모바일에서 많이 사용됩니다.

[플러그인명]

pgpopup.js

[버전]

2.0

최초작성

[사용법]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="제공하는 플러그인 cdn"></script> <script> function act1(){ $('body').pgpopup({ type:'toast', msg:'welcome' }); } </script>

1. 여기 홈페이지에서 복사된 내용을 붙여넣기 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="제공하는 플러그인 cdn"></script> <script> function act1(){ $('body').pgpopup({ type:'toast', msg:'welcome' }); } </script>

2. body에 위와 같이 pgpopup을 실행해 줍니다.

[예제]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="제공하는 플러그인 cdn"></script> <script> function act1(){ $('body').pgpopup({ type:'layer', msg:'welcome' }); } function act1(){ $('body').pgpopup({ type:'slide', direction:'dwon', msg:'welcome' }); } </script>

일반적인 형태의 layer와 아래위 또는 위아래로 나타났다 사라지는 slide 형태의 팝업 예제입니다. 소스를 보시면 슬라이드의 경우 direction 이라는 항목이 하나더 있는데 up과 down 두가지 속성이 있으며 up은 화면에 위에서 나타나고 down은 화면에 아래에서 나타납니다.

[옵션설명]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="제공하는 플러그인 cdn"></script> <script> function act1(){ $('body').pgpopup({ type:'', //팝업형태 (toast, layer, slide) msg:'', //메시지                         padding:'', //여백                         width:'', // 토스트폭, %로 지정                         color:'', //내용 글자색                         bgcolor:'', //레이어 배경색, #111111 와 같이 헥사코드 이용                         transparency:'', //투명도, 0.8 과 같이 값을 입력, 최대 1                         delay:'', //얼마의 시간이 지난뒤 사라지게 할것인지 , 1000 = 1초, toast와 slide에만 적용됨                         time:'', //서서히 보여지는 시간, 1000 = 1초                         direction:'' // slide 팝업의 경우 어느방향에서 나타나게 할지의 여부(up,down) }); } </script>