The notification component shows a pop-up on the screen for providing notifications.
By default, all elements with the data-role="notification"
attribute are displayed as notifications.
Use the <p>
element for messages and the <img>
element for icons.
To manually create a notification component, use the component constructor from the tau
namespace (RECOMMENDED):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notification")); </script>
If the jQuery library is loaded, you can use its method (support for backward compatibility):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> var notification = $("#notification").notification(); </script>
A smallpopup notification has a single line of text and is positioned at the bottom of the active page. The smallpopup is the default notification type.
To create a smallpopup notification using the TAU API (RECOMMENDED):
<div data-role="notification" id="notification" data-type="smallpopup"> <p>Line of message</p> </div> <script> // Get component instance or create new instance if component does not exist var notification = tau.widget.Notification(document.getElementById("notification")); // Open notification notification.open(); </script>
To create a smallpopup notification using the jQuery API (support for backward compatibility):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> // Open component using jQuery notation $("#notification").notification("open") </script>
A ticker notification has a maximum of 2 lines of text and is positioned at the top of the active page. You can set an icon for a ticker notification.
To create a ticker notification using the TAU API (RECOMMENDED):
<div data-role="notification" id="notification" data-type="ticker"> <p>First line of message</p> <p>Second line of message</p> </div> <script> // Get component instance or create new instance if component does not exist var notification = tau.widget.Notification(document.getElementById("notification")); // Open notification notification.open(); </script>
To create a ticker notification using the jQuery API (support for backward compatibility):
<div data-role="notification" id="notification" data-type="ticker"> <p>First line of message</p> <p>Second line of message</p> </div> <script> // Open component using jQuery notation $("#notification").notification("open") </script>
To create a ticker notification with an icon using the TAU API (RECOMMENDED):
<div data-role="notification" id="notification" data-type="ticker"> <img src="icon.png"> <p>First line of message</p> <p>Second line of message</p> </div> <script> // Open notification notification.open(); </script>
To create a ticker notification with an icon using the jQuery API (support for backward compatibility):
<div data-role="notification" id="notification" data-type="ticker"> <img src="icon.png"> <p>First line of message</p> <p>Second line of message</p> </div> <script> // Open component using jQuery notation $("#notification").notification("open") </script>
An interval defines the length of time a notification is displayed. After the time is up, the notification closes automatically. If you do not specify an interval, the notification is displayed until the user manually closes it.
The value of the data-interval
attribute is a positive number of milliseconds. For example, data-interval="2000"
sets the notification to close automatically after 2 seconds.
To create a notification with an interval using the TAU API (RECOMMENDED):
<div data-role="notification" id="notification" data-type="ticker" data-interval="4000"> <img src="icon.png"> <p>I will close in 4* seconds!</p> <p>* starts counting from component opening</p> </div> <script> // Get component instance or create new instance if component does not exist var notification = tau.widget.Notification(document.getElementById("notification")); // Open notification notification.open(); </script>
To create a notification with an interval using the jQuery API (support for backward compatibility):
<div data-role="notification" id="notification" data-type="ticker" data-interval="4000"> <img src="icon.png"> <p>I will close in 4* seconds!</p> <p>* starts counting from component opening</p> </div> <script> // Open component using jQuery notation $("#notification").notification("open") </script>
The following table lists the options for the notification component.
Option | Input type | Default value | Description |
---|---|---|---|
data-type | "smallpopup" | "ticker" | "smallpopup" | Notification type. |
data-interval | number | null | Time interval in milliseconds after which the notification closes automatically. |
Method | Description |
---|---|
close ( ) |
Closes the notification on the screen. |
destroy ( ) |
Removes the component. |
disable ( ) |
Disables the component. |
enable ( ) |
Enables the component. |
icon ( string src ) |
Creates an icon or changes an existing icon to a new one. |
open ( ) |
Displays the notification on the screen. |
Notification refresh ( ) |
Refreshes the notification and resets its interval, if specified. |
Array text ( string text0, string text1 ) |
Gets or sets the notification text. |
close
Closes the notification on the screen.
close ( )
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); notification.close(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> </div> <script> $("#notificationSelector").notification("close"); </script>
destroy
Removes the component.
destroy ( )
The method returns the component back to its pre-initialization state.
Return value:
No return valueCode example (TAU API RECOMMENDED):
<script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")), notification.destroy(); </script>
Code example (jQuery API support for backward compatibility):
<script> $("#notificationSelector").notification("destroy"); </script>
disable
Disables the component.
disable ( )
The method adds the display:none
style to the component, preventing the notification from being displayed on the screen.
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> // Get component instance or create new instance if component does not exist var notification = tau.widget.Notification(document.getElementById("notification")); // Disable component notification.disable(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> // Disable component $("#notification").notification("disable"); </script>
enable
Enables the component.
enable ( )
The method removes the display:none
style from the component, allowing the notification to be displayed on the screen.
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> // Get component instance or create new instance if component does not exist var notification = tau.widget.Notification(document.getElementById("notification")); // Enable component notification.enable(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notification" data-type="smallpoup"> <p>Line of message</p> </div> <script> // Enable component $("#notification").notification("enable"); </script>
icon
Creates an icon or changes an existing icon to a new one.
icon ( string src)
The method resets the CSS classes on the image element.
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
src | string | Required | URL of the image file to use as the icon. |
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); notification.icon("some-image.png"); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> $("#notificationSelector").notification("icon", "some-image.png"); </script>
open
Displays the notification on the screen.
open ( )
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); notification.open(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> $("#notificationSelector").notification("open"); </script>
refresh
Refreshes the notification and resets its interval, if specified.
Notification refresh ( )
Return value:
Type | Description |
---|---|
Notification | Returns this. |
Code example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); notification.refresh(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="smallpoup"> <p>Line of message</p> </div> <script> $("#notificationSelector").notification("refresh"); </script>
text
Gets or sets the notification text.
Array text ( string text0, string text1)
If no parameters are specified, the method returns the current notification text as an array.
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
text0 | string | Required | First line of notification text. | |
text1 | string | Required | Second line of notification text. |
Return value:
Type | Description |
---|---|
?Array | If no parameters are specified, returns the current notification text. |
Code example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> <p>Second line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); var widgetText = notification.text(); alert(widgetText); // Alert "Line of message,Second line of message" </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> <p>Second line of message</p> </div> <script> var widgetText = $("#notificationSelector").notification("text"); alert(widgetText); // Alert "Line of message,Second line of message" </script>
Code example (TAU API RECOMMENDED):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> <p>Second line of message</p> </div> <script> var notification = tau.widget.Notification(document.getElementById("notificationSelector")); notification.text("This is a new Notification!", "This is an example"); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="notification" id="notificationSelector" data-type="ticker"> <p>Line of message</p> </div> <script> $("#notificationSelector").notification("text", "This is new Notification!", "This is an example"); </script>