Cara menggunakan self close javascript

Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. The javascript code snippets in this documentation with the

$(".elem-demo").notify("Hello Box");

$.notify("Hello World");

Element Notifications

You can place notifications on any element:

$(".elem-demo").notify("Hello Box");

Like this box

Global Notifications

If you don't specify an element, notification will appear in the top left (unless you specify a different position - See Positioning)

$.notify("I'm over here !");

Notification Styles

Each style may define a set of classes to use to substyle the notification. The pre-packaged version includes a bootstrap notification style (see more below in Styling). These classes include:

Success

$.notify("Access granted", "success");

$.notify("Do not press this button", "info");

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

$.notify("BOOM!", "error");

Note: This page has set the default class to

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

Positioning

The

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$(".elem-demo").notify("Hello Box");

$.notify("I'm over here !");

$.notify("I'm over here !");

$.notify("I'm over here !");

$.notify("I'm over here !");

$(".pos-demo").notify(
  "I'm to the right of this box", 
  { position:"right" }
);

We can position the notification around this box

Use this positioning tool to see all possible

$(".elem-demo").notify("Hello Box");

An awesome cool larrrggggeeee box

API

$.notify("I'm over here !");

6

$.notify("I'm over here !");

7

$.notify("I'm over here !");

8

$.notify("I'm over here !");

9

$.notify("Access granted", "success");

0

$.notify("I'm over here !");

$.notify("I'm over here !");

$.notify("I'm over here !");

6

$.notify("Access granted", "success");

4

$.notify("Access granted", "success");

5

$.notify("I'm over here !");

7

$.notify("I'm over here !");

8

$.notify("I'm over here !");

9

$.notify("Access granted", "success");

0

$.notify("Access granted", "success");

$.notify("I'm over here !");

$.notify("I'm over here !");

$.notify("Do not press this button", "info");

3

$.notify("Do not press this button", "info");

4

$.notify("Do not press this button", "info");

5

$.notify("I'm over here !");

7

$.notify("I'm over here !");

8

$.notify("I'm over here !");

9

$.notify("Access granted", "success");

0

$.notify("Do not press this button", "info");

$.notify("I'm over here !");

$.notify("I'm over here !");

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

3

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

4

$.notify("Access granted", "success");

5

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

6

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

7

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

$.notify("BOOM!", "error");

0

$.notify("I'm over here !");

9

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

7

$.notify("I'm over here !");

Options

The options object listed above are in the form below. This object below is the actual used to check option validity and set defaults.

{
  // whether to hide the notification on click
  clickToHide: true,
  // whether to auto-hide the notification
  autoHide: true,
  // if autoHide, hide after milliseconds
  autoHideDelay: 5000,
  // show the arrow pointing at the element
  arrowShow: true,
  // arrow size in pixels
  arrowSize: 5,
  // position defines the notification position though uses the defaults below
  position: '...',
  // default positions
  elementPosition: 'bottom left',
  globalPosition: 'top right',
  // default style
  style: 'bootstrap',
  // default class (string or [string])
  className: 'error',
  // show animation
  showAnimation: 'slideDown',
  // show animation duration
  showDuration: 400,
  // hide animation
  hideAnimation: 'slideUp',
  // hide animation duration
  hideDuration: 200,
  // padding between element and notification
  gap: 2
}

Custom Styling Guide

You can add your own styles to Notify.js with the

$.notify("BOOM!", "error");

Style definition objects are in the form:

{
  //required html representing each notification 
  html: "",
  //optional object to be converted to css
  classes: {
    : {
      :  
    },
    : {
      ...
    },
    ...
  },
  //optional css to be inserted onto the page
  css: ""
}

html

$.notify("BOOM!", "error");

$.notify("BOOM!", "error");

$.notify("BOOM!", "error");

$.notify("BOOM!", "error");

classes

css

Class naming convention

When each notification is constructed, it's container (outer most element defined in your style html) will automatically apply the class: