기본적인 알림창을 사용하는 방법입니다.
$.notify("Alert!");
type
옵션을 사용하여 알림창의 스타일을 지정합니다. 기본값 : default
커스텀 스타일 적용을 위해서는 color
background
class
섹션을 참고하세요.
$.notify("Alert!", {type:"info"});
align
verticalAlign
옵션을 사용하여, 알림창의 위치를 지정합니다. 기본값 : center, top
모바일에서 알림창의 가로크기는 100%으로 작동하기 때문에 align
은 적용되지 않습니다.
verticalAlign
값은 모두 작동하나, middle값에서는 알림창의 가로크기가 80%으로 적용됩니다.
자세한 사항은 모바일 섹션을 참고하세요.
align | |
---|---|
verticalAlign | |
$.notify("Alert!", {align:"center", verticalAlign:"top"});
이름 | 값 | 설명 |
---|---|---|
align (가로위치)기본값 : center |
left | 알림창의 가로위치를 왼쪽에 위치시킵니다. |
center | 알림창의 가로위치를 가운데에 위치시킵니다. | |
right | 알림창의 가로위치를 오른쪽에 위치시킵니다. | |
verticalAlign (세로위치)기본값 : top |
top | 알림창의 세로위치를 상단에 위치시킵니다. |
middle | 알림창의 세로위치를 중간에 위치시킵니다. | |
bottom | 알림창의 세로위치를 하단에 위치시킵니다. |
delay
옵션을 사용하여, 알림창이 표시되는 시간을 설정합니다.기본값 : 3000 (단위 milliseconds)
시간을 0으로 설정하게 되면 배경이 흐릿하게 표시되며, close
옵션이 true로 변경됩니다.
알림창은 배경을 클릭하거나, 닫기아이콘을 클릭하면 알림창이 닫힙니다.
배경의 불투명도를 설정하려면 blur
섹션을 참고하세요.
$.notify("Alert!", {delay:2000});
animation
옵션을 사용하여, 에니메이션 사용여부를 설정합니다. 기본값 : true
$.notify("Alert!", {animation:true});
animationType
옵션을 사용하여, 에니메이션 효과를 선택합니다. 기본값 : drop
$.notify("Alert!", {animationType:"drop"});
color
옵션을 사용하여, 알림창의 글씨 색상을 정의합니다. 기본값 : #000
$.notify("Alert!", {color: "#D44950"});
background
옵션을 사용하여, 알림창의 배경 색상을 정의합니다.
$.notify("Alert!", {color: "#fff", background: "#D44950"});
icon
옵션을 사용하여, 메세지에 아이콘을 추가합니다.
아이콘을 사용하려면 Font Awesome
의 라이브러리를 추가해야합니다.
값으로 Font Awesome
의 아이콘 네임
을 사용합니다.
$.notify("Success", {type: "info", icon:"check"});
class
옵션을 사용하여, 커스텀 스타일 시트를 정의합니다.
$.notify("Hello World!
", {class:"my-class", delay:0, align:"center", verticalAlign:"middle", animationType:"scale"});
/* 스타일 정의 */
.my-class{
background: #304CD8;
background: -webkit-linear-gradient(left, #304CD8 0%, #9F3762 100%);
background: -ms-linear-gradient(left, #304CD8 0%, #9F3762 100%);
background: linear-gradient(to right, #304CD8 0%, #9F3762 100%);
color: #fff;
font-size: 25px;
padding: 35px;
text-align: center;
}
blur
옵션을 사용하여, 알림창의 뒷배경 불투명도를 조절합니다. 기본값 : 0.2
$.notify("Alert!", {blur: 0.2, delay: 0});
close
옵션을 사용하여, 알림창을 닫을 수 있는 닫기아이콘을 추가합니다. 기본값 : false
delay
값이 0인경우 close
의 값이 자동으로 true로 설정됩니다.
$.notify("Alert!", {close: true});