Notify Build pretty notification boxes
-
You can download Notify via npm or clone its repository:
Git: git clone https://git.assembla.com/notify-.git master
NPM: npm install metro-notify
And, include it in your project as shown below:
Git:
<link type = "text/css" href = "notify/css/notify.css" rel = "stylesheet"></link>
<body>
//Your content
</body>
<script type = "application/javascript" charset = "UTF-8" src = "notify/js/jquery-2.2.4.min.js"></script>
<script type = "application/javascript" charset = "UTF-8" src = "notify/js/notify.js"></script>
Node:
First of all, you'll need to build your notify assets using browserify or Laravel Elixir. It is simple, gonna show you below.
$ = require("jquery-browserify");
var css = require('app.css');
var Notify = require('metro-notify');
var notify = new Notify();
In your app.css just write
//app.css
@import url("pathTo/node_modules/metro-notify/css/iconFont.css");
@import url("pathTo/node_modules/metro-notify/css/notify.css");
And on your console, run the following code:
browserify -t browserify-css your_script_name.js > bundle.js
Now you just need to include bundle.js in your html file, and yes, it also has your css code in it. :)
-
Now you can start Notify as shown in the code below
var notify = new Notify();
notify
.show
( "Title", "My Message", {position
: notify
.LEFT
, type
: notify
.INFO
, time: 5 ); //(title, message, {options})
-
Title: Notification's title.
-
Message: Notification's message.
-
Position: Here you will set where you want that Notify should appear. There are
two possible positions:
LEFT, RIGHT.
Default value is RIGHT.
-
Type: It is the type of the message which can be
INFO,
WARNING or ERROR.
Default value is INFO.
-
Time: Notify will close after the time (in seconds) you have set here. If you have not, it will not close
automatically.
You can run Notify filling the form below
-
Notify also has a confirm dialog which is also simple to create as shown below
var notify = new Notify();
var callback = function (result) { if(result) alert("You clicked on 'Ok'"); else alert("You clicked on 'Cancel'");};
notify.confirmDialog( "Title", "My Message", { callback: callback}); //(title, message, {options})
Now, click
here to see the result.
You can also pass {modal: false} as the third argument to disabled modal.
If you want to add custom buttons to the dialog, you will need to create them by using
NotifyButton as shown below
var notify = new Notify();
var buttons
= new Array(); buttons.push( new NotifyButton( "btFacebook", "Facebook", function () {alert("Facebook");})); //(id, value, {options})
buttons.push( new NotifyButton( "btTwitter", "Twitter", function () {alert("Twitter");})); //(id, value, {options})
buttons.push( new NotifyButton( "btYoutube", "Youtube", function () {alert( "Youtube");})); //(id, value, {options})
notify.confirmDialog( "Hello", "Which web site do you want to open?", { buttons: buttons}); //(title, message, {options})
Now, click
here to see the result.