[jQuery] alert 디자인을 바꿔주는 플러그인

alert 디자인을 바꿔주는 플러그인

ALERTIFY.js  Alert Plug-In

Setup

URL : http://fabien-d.github.io/alertify.js/

alertify.js-0.3.11.zip

아래 폴더에 있는 라이브러리를 프로젝트에 저장

lib 폴더 alertify.js, alertify.min.js

themes 폴더 alertify.bootstrap.css, alertify.core.css, alertify.default.css

 

Usage

위에 추가한 경로에 있는 해당 라이브러리 참조

Include JS

<script src="/경로/alertify.min.js"></script>

Include CSS

<link rel="stylesheet" href="/경로/alertify.core.css"/>

<link rel="stylesheet" href="/경로/alertify.default.css"/>

 

Default Usage (기본 alert 메시지)

1. alert

alertify.alert("Message");

 

2. confirm

alertify.confirm("Message", function (e) {

if (e) {

        // user clicked "ok"

    } else {

        // user clicked "cancel"

    }

});

 

3. prompt

alertify.prompt("Message", function (e, str) {

    // str is the input text

    if (e) {

        // user clicked "ok"

    } else {

        // user clicked "cancel"

    }

}, "Default Value");

 

Default notifications (페이지 우측 하단에 노출되는 메시지)

1. log

alertify.log("Notification", type, wait);

 

2. success notification

alertify.success("Success notification");

 

3. error notification

alertify.error("Error notification");

 

Basic Custom

1. alert 테두리 값, 색상

alertify.default.css > .alertify의 border 에서 설정

2. 버튼 테두리 focus 효과 관련 삭제

alertify.default.css > .alertify-button:hover, .alertify-button:focus, .alertify-button:focus 주석 처리

3. alert 타이틀

alertify.min.js > <div class="alertify-dialog"> 부분 바로 앞에

<div class="alertify-title">WADIZ</div> 타이틀 추가

타이틀 관련 css

.alertify-title{ text-align: center; font-size: 20px; color: #348ec8; padding-top: 10px; font-weight: bold; }

커스텀 alert도 가능

alertify.set({ labels: {

   ok     : "Accept",

   cancel : "Deny"

} });

// button labels will be "Accept" and "Deny"

alertify.alert("Message"); 

버튼 리버스 (좌우 위치이동)

alertify.set({ buttonReverse: true });