jquery hints Plugin alertify usage guide

jquery Hints Plugin alertify usage guide

Alertifyjs is a non-intrusive, customizable JavaScript notification component. Includes customizable dialog boxes, and lower-right message pop-up boxes. Fully customizable alerts, confirmation and prompt dialogs, fully customizable notification systems, callback parameter handling including "OK" and "Cancel" button clicks, allow dialog boxes to queue

1.alertify plug-in function

The main implementation of the hint function, to replace the alert,confirm,prompt in JS, display a friendly prompt box

2.alertify Use method

1. The documents used

Mainly uses three files, two CSS (ALERTIFY.CORE.CSS,ALERTIFY.DEFAULT.CSS), to set the style of the hint box. A JS (alertify.min.js or Alertify.js) that implements the function of the prompt box.

2. Implement the Hint box code

Alertify use is very simple, the main step is: initialization (initialization alertify)-binding (binding event)

If you implement a simple prompt box, confirmation box, and Prompt box

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46

var $ = function (ID) {return document.getElementById (ID);},//initialize operation reset = function () {Alertify.set ({labels: {OK : "Confirm", Cancel: "Cancel"}, delay:5000, Buttonreverse:false, Buttonfocus: "OK"}); }; Bind $ ("alert"). onclick = function () {reset (); Alertify.alert ("cue box"); Binding $ ("confirm"). onclick = function () {reset (); Alertify.confirm ("Confirm Box", function (e) {if (e) {alertify.success ("click OK" ); else {alertify.error ("click Cancel");}); return false; }; Bind $ ("prompt"). onclick = function () {reset (); alertify.prompt ("Prompt input Box", function (e, str) {if (e) {alertify.success (" Click OK and the input is: "+ str";} else {alertify.error ("click Cancel");}, "Default value"); return false; };

Show results (enter balloon):

4.alertify Modify Style

The main is to modify two CSS files (alertify.core.css,alertify.default.css), you can also overwrite the use. If you include in the page

?

1 2 3 4 5 6 7

. alertify{width:350px Margin-left: -205px; border:2px solid #4ba9e6; background: #f3faff; border-radius:0;}

Show results after modification:

Alertify Use instructions

Alertify is a plugin developed by HTML5+CSS3, so the perfect support for HTML5+CSS3 browsers. In the test process, alertify in the Chrome and Firefox browser to display the effect is perfect, but in IE8, the display effect is different, such as rounded corners, shadows, animation effects, etc. will not be displayed.