When the original JS Alert needs treatments.
This is the main purpose of making this library, replacing the old school JS alert.
No JQuery needed, written in pure JS. :)
AstNotif.dialog("Caution!", "Hai Dunia! :D");
AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
Option | Description |
---|---|
color |
Dialog text color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgheadcolor |
Background header color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgbodycolor |
Background body color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgfootcolor |
Background footer color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
icon |
Will dialog show icon? Argument: Booelan, true/false. |
imgIcon |
If dialog icon using image. Argument: String path e.g: "../your/path/image.png" |
iconSize |
The size of the icon. Argument: Integer. Read as pixel. |
positive |
Dialog button OK. Argument: String, default: "OK" |
negative |
Dialog button cancel. Argument: String, default: "cancel" |
fa |
Supports font awesome icon. Argument: Font awesome string, without "fa-". So "fa-money" is just "money". |
dismissible |
Enables user to close the dialog by clicking the backdrop. Argument: Boolean, default: true |
This is the brand new version of dialog, quite modern and extremely similar to dialog. But without the title and you can make your own html content in the message.
AstNotif.poster("<h3>Hai Dunia! :D 😊</h3>");
AstNotif.poster(message: string or HTML content string, options[optional]: object, callbackOK: function, callbackCancel: function);
Option | Description |
---|---|
color |
Dialog text color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgcolor |
Poster background color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
icon |
Will dialog show icon? Argument: Booelan, true/false. |
imgIcon |
If dialog icon using image. Argument: String path e.g: "../your/path/image.png" |
iconSize |
The size of the icon. Argument: Integer. Read as pixel. |
positive |
Dialog button OK. Argument: String, default: "OK" |
negative |
Dialog button cancel. Argument: String, default: "cancel" |
fa |
Supports font awesome icon. Argument: Font awesome string, without "fa-". So "fa-money" is just "money". |
dismissible |
Enables user to close the poster by clicking the backdrop. Argument: Boolean, default: true |
It just like a toast on your Android smartphone, with customizable color and others. :)
AstNotif.toast("Hai Dunia! :D");
AstNotif.toast(message: string, options[optional]: object);
Option | Description |
---|---|
length |
How long Toast will show. Argument: Integer in milliseconds or "SHORT"/"LONG" |
color |
Toast text color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgcolor |
Toast background color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
reverseColor |
Reverse background and text color, suitable if you want night mode for example. Argument: Boolean. Default is false. |
alpha |
Toast opacity or transparancy. Argument: Float number from 0 to 1. |
borderRadius |
Set Toast corner roundness. Argument: Integer or string that followed by "px" or "%". Integer is read as pixel (px). E.g: 50 or "40px" or "10%" |
vdist |
Set Toast vertical distance relative position after margin. Argument: Integer, read as pixel (px). Use minus for opposite use. (Doesn't apply to center ("c") position) |
hdist |
Set Toast horizontal distance relative position after margin. Argument: Integer, read as pixel (px). Use minus for opposite use. (Doesn't apply to center ("c") position) |
margin |
Set Toast margin relative to screen. Argument: Integer, read as pixel (px). |
position |
Set Toast position in 8 wind directions. Argument: Insensitive String, "n", "ne", "e", "se", "s", "sw", "w", "nw", and "c" for position of the center of the screen. Default "s". |
It just like a snackbar on your Android smartphone, with customizable color and others. :)
AstNotif.snackbar("Hai Dunia! :D");
AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);
Option | Description |
---|---|
length |
How long Snackbar will show. Argument: Integer in milliseconds or "SHORT"/"LONG" |
color |
Snackbar text color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgcolor |
Snackbar background color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
btncolor |
Snackbar button color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
button |
Button text. Argument: Text string, button will not show if you leave this empty. |
fa |
Supports font awesome icon. Argument: Font awesome string, without "fa-". So "fa-money" is just "money". |
reverseColor |
Reverse background and text color, suitable if you want night mode for example. Argument: Boolean. Default is false. |
position |
Snackbar position. Argument: "top" or "bottom". Default is "bottom". |
If you are a Windows user, you should be familiar with this. :)
AstNotif.notify("The Title", "Hai Dunia! :D", "now");
AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);
Option | Description |
---|---|
length |
How long notif box will show. Argument: Integer in milliseconds or "SHORT"/"LONG", -1 for stay forever. |
color |
Notif box text color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
bgcolor |
Notif box theme color. Argument: Hex color string or rgb, e.g: "#02BAF2" |
icon |
Will notif box show icon? Argument: Booelan, true/false. |
imgIcon |
If notif box icon using image. Argument: String path e.g: "../your/path/image.png" |
fa |
Supports font awesome icon. Argument: Font awesome string, without "fa-". So "fa-money" is just "money". |
position |
Opacity or transparancy. Argument: String, "left" or "right". Default is "right" |
alpha |
Opacity or transparancy. Argument: Float number from 0 to 1. |
A semi playground you will enjoy. :)
Choose a theme (just like a bootstrap ones):
IMPORTANT! As per this version (v0.1), setting the theme in individual module would affect the current module only. If you want to change the whole theme, use astn.theme.set(theTheme). See "Main Settings" section on the left.
AstNotif.dialog("Travel Caution!", "Jakarta is very good city. You should visit it!", options[optional]: object);
AstNotif.poster("Travel Caution!", "<h3>Jakarta is very good city. You should visit it!</h3>", options[optional]: object);
AstNotif.toast("Jakarta is very good city. You should visit it!", options[optional]: object);
AstNotif.snackbar("Jakarta is very good city. You should visit it!", options[optional]: object);
There's also a get and set to the whole settings. Like, when you want set a general theme for the whole notification modules or like when you want to change the Z Index so that it would always the top, just like CSS z-index.
AstNotif.theme.set(Theme :String)Set the theme. Available theme: "Default", "Danger", "Info", "Success", "Warning", "Primary", and "Dark".
AstNotif.theme.get()Return the string of current theme.
AstNotif.zIndex.set(zIndex :int)Set the Z Index.
AstNotif.zIndex.get()Get the current global Z Index of this library.
Thank you for using my library.
Works fine on IE 9, I guess.
But there're some important notes you should notice.
astninstead of
AstNotifjust like jQuery that using
$instead of
jQuery.
Thank you for using my library. Click this:
AST Notif download page.