Ads

Monday 21 July 2014

Alertify.js - browser dialogs never looked so good

Download   Demo


Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren’t leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain – by all means go for it!


It’s been great seeing people use it and enjoy it and this decision is simply because I don’t believe it’s fair that developers are looking for help and not getting it.


I wish I had more time or contributions to keep it going and make it better, but the sad reality is that not usually the case on these kinds of projects.


usage



Insert into HTML


Include JS


 







1

2

3



<!-- ideally at the bottom of the page -->

<!-- also works in the <head> -->

<script src="PATH_TO_FILE/alertify.min.js"></script>




 


Include CSS


 







1

2

3

4



<!-- include the core styles -->

<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />

<!-- include a theme, can be included into the core instead of 2 separate files -->

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




 



default usage



Default dialogs


 







1

2



// alert dialog

alertify.alert("Message");




 


 







1

2

3

4

5

6

7

8



// confirm dialog

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

    if (e)

        // user clicked "ok"

     else

        // user clicked "cancel"

    

);




 


 







1

2

3

4

5

6

7

8

9



// prompt dialog

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

2

3

4



// standard notification

// setting the wait property to 0 will

// keep the log message until it's clicked

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




 


 







1

2

3



// success notification

// shorthand for alertify.log("Notification", "success");

alertify.success("Success notification");




 


 







1

2

3



// error notification

// shorthand for alertify.log("Notification", "error");

alertify.error("Error notification");




 



customizable properties



 







1

2



// using the `set` method

alertify.set( ... );




 




Delay


 







1

2

3

4

5

6

7

8



// time (in ms) before log message hides

// default: 5000

alertify.set( delay: 10000 );

// log will hide after 10 seconds

alertify.log("Notification");

// setting the delay to 0 will leave

// the log message until it's clicked

alertify.log("Notification", "", 0);




 




Button labels


 







1

2

3

4

5

6

7

8



// custom OK and Cancel label

// default: OK, Cancel

alertify.set( labels:

    ok     : "Accept",

    cancel : "Deny"

);

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

alertify.confirm("Message");




 




Button focus


 







1

2

3

4

5



// which button receives focus

// default: OK

alertify.set( buttonFocus: "cancel" ); // "none", "ok", "cancel"

// focus will be given to the cancel button

alertify.confirm("Message");




 




Button order


 







1

2

3

4

5



// order of the buttons

// default: Cancel, OK

alertify.set( buttonReverse: true ); // true, false

// buttons order will be OK, Cancel

alertify.confirm("Message");




 



custom notification



 







1

2

3

4

5



// extend log method

// set it

alertify.custom = alertify.extend("custom");

// use it

alertify.custom("Notification");




 



custom themes



 







1

2

3

4



// bootstrap theme

// use bootstrap theme CSS

// themes/alertify.bootstrap.css

alertify.prompt("message", ...);






Alertify.js - browser dialogs never looked so good

No comments:

Post a Comment