Notification

The notification component shows a pop-up on the screen for providing notifications.

Table of Contents

1. Default Selectors
2. Manual Constructor
3. HTML Examples
4. Options
5. Methods

Default Selectors

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.

Manual Constructor

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>

HTML Examples

Smallpopup Notification

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>
  

Ticker Notification

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>
  

Notification with an Interval

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>
  

Options

The following table lists the options for the notification component.

Methods

Summary

close() 

destroy() 

disable() 

enable() 

icon(string src) 

open() 

Notification refresh() 

Array text(string text0, string text1) 

close

Closes the notification on the screen.

close() 

Return value:

No return value

Code 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 value

Code 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 value

Code 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 value

Code 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 value

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.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 value

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.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>