Skip to main content
Kinetic Community

Notifie JS

Javascript library for displaying notifications

Usage

  1. Download the library from https://github.com/KineticCommunity/Notifie
  2. Add CSS and JS file to //libraries/jquery.notifie/ (You will have to create the jquery.notifie directory.)
  3. Open head.jspf (Found in //common/interface/fragments/)

    Import CSS file at the top of head.jspf with the other CSS files <link rel="stylesheet" type="text/css" href="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.css" />

    Import JS file at the bottom of head.jspf with the other JS files <script type="text/javascript" src="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.js"></script>

  4. Call .notifie(options) on a jQuery element, where options is a Javascript object with settings for the notifications.

    Example:

$('input').notifie({ type: 'alert', severity: 'info', message: 'This is an informative notification.' });

Available Options (All of these are optional. If you pass it, it will overwrite the default.):

Option Name Option Type, options Option Default Option Description
anchor String -> jQuery selector null Finds the closest element matching this selector to use as anchor of the notifications. Examples: 'div' or 'li.main'
type String -> 'alert' or 'confirm' alert Defines the type of notification to display.
severity String -> 'danger' or 'warning' or 'info' or 'success' danger Defines the style of the notification.
message String Error Text to display inside the notification.
margin Object -> Available properties: inherit[true|false|padding], margin[#px|#px #px|...], margin-top[#px], margin-bottom, margin-left, margin-right {inherit:true} Sets the margins of the notification.
onShow Function function(){} Function to call when the notification is shown. Context is the calling element.
onConfirm Function function(){} Function to call when alert is closed or confirm button is pressed in confirmation notification.
onReject Function function(){} Function to call when confirmation notification is closed or reject button is pressed in confirmation notification.
clearExisting Boolean true If true, closes any existing notifications at this level before opening a new one.
exitEvents String -> Javascript event name(s) '' Applies only when 1 notification will be opened (ie: calling element or its anchor translates toa single element, not a list of elements). Events that will get added to calling element that will close the notifications. You may pass multiple events by separating them by spaces. Examples: 'click' or 'focus' or 'click focus'
textButtons Boolean false If true, buttons in a confirmation notification will show text instead of icons.
confirmText String 'OK' If textButtons is true, this text will display on the confirm button.
rejectText String 'Cancel' If textButtons is true, this text will display on the reject button.
duration Number 100 Amount of milliseconds that the animation of showing/hiding the notification should take. Setting to 0 removes the animation.
expire Number null Applies only if type is alert. Amount of milliseconds that the alert will stay on screen before automatically disappearing.
disable Boolean true If true, the calling element will be disabled when the notification is shown, and enabled when the notification is closed.
toggle Boolean false If true and if notification at the anchor level already exists, this .notifie() call will only close that notification.
exit Boolean false If true, this .notifie() call will only close the notification(s) at the anchor level.
recurseExit Boolean false Applies only if exit is true. If true, closes all notifications at the anchor level and inside all children of the anchor.

Example

Below are a series of examples and the line of javascript that created them. Note all of these notifications appeared above the header (h2) element on the page in question.

infonotif.png

$("h2").notifie({
    type: 'alert', severity: 'info', message: 'This is an informative notification.' });
}

warningnotif.png

$("h2").notifie({
    type: 'alert', severity: 'warning', message: 'This is an warning notification.' });
}

dangernotif.png

$("h2").notifie({
    type: 'alert', severity: 'danger', message: 'This is an danger notification.' });
}

infoconfirm.png

$("h2").notifie({
    type: 'confirm', severity: 'info', message: 'This is an info confirmation with default buttons.' });
}

dangerconfirm.png

$("h2").notifie({
    type: 'confirm', severity: 'danger', message: 'This is an danger confirmation with default text buttons.', textButtons: true });
}