Notifications
Overview
The Notification widget was created to provide a secondary method of display small but relevant information to a user. It is considered secondary as it is not to be used when an action requires a users immediate attention. If information needs to be presented to a user and it must be focused on; consider other alternative such as Modal windows or directing users to another page.
Please note: Notifications only work in browsers Internet Explorer 7+
The notification widget provides two forms of Notifications: Persistent and Automatic Fade-Out. The default settings for a notification is Automatic Fade-Out after 5 seconds. Persistent notifications, as it name implies, will not automatically fade away. In both forms of Notifications, users are provided with a way to close notifications manually .
Implementation
A developer will need some basic knowledge of jQuery to understand how to implement notifications.
The notification function starts with the jQuery function .uxNotice(), called upon the target triggering jQuery object.
Refer to the table later in the documentation for the details on the parameters that the function can accept.
Basic Notification
The sample Javascript snippet below will create a basic notification. This example will show when a link with the class of basic-note is clicked.
<script>
$('.basic-note').click(function(){
$(this).uxNotice({
title: "Basic Notification",
message: "This is the message you want to show.
You can close me if you want or I will fade away on my own."
});
});
</script>
The above example in action: Basic Notification
Persistent Notification
The sample Javascript snippet below will create a persistent notification. This example will show when a link with the class of persist-note is clicked.
<script>
$('.persist-note').click(function(){
$(this).uxNotice({
title: "Persistent Notification",
message: "This is the message you want to show.
I will stay here; till you close me.",
type: "persist"
});
});
</script>
The above example in action: Persistent Notification
A Persistent Notification will stay on the screen, and will remain within the background "tray" which will not fade away automatically.
Customizing Notification
All aspects of the notification component is controlled via the notification plug-in options. This allows for the most flexibility while ensuring style and functionality consistency. The table below outlines all of the current notification options and the requirements for using the component.
| Option | Description | Requirement |
|---|---|---|
title |
Sets the message title. | Required |
message |
Sets the message body contents | Required |
type |
Defines the notification location (free standing/inside of notification tray). Default options are free standing notifications (notifications are not wrapped in a tray like container). | Optional |
rollUpTimer |
Defines if notification will automatically fade out or not. To disable auto fade out, set option to false. NOTE: only basic message will fade out by default. | Optional |
outTimer |
Length till automatic fade out occurs (default is 5 seconds). Overriding values are in milliseconds (1000 milliseconds = 1 second). | Optional |
special |
Defines special pre-made notification items. See Special Notifications for more details. | Optional |
Special Notifications
Special notifications are those developed by the UX group and are created because they can used across the all applications and websites that use the UX framework. In order to active a speical type of notification add the option of special, follow by any special notification keyword listed below.
| Type | Code | Description |
|---|---|---|
| Google Translate | gtranslate |
Enables Google translation option. This is screen translation done by Google Translate Service
and is machine translated.
Do not use this unless you understand that Google Translation is not perfect, and that translation errors will not be an issue with your translation needs. |