Kendo UI for jQuery Notification Overview
The Notification provides a styled UI widget with arbitrary content which can provide information to the user on various occasions.
The Notification is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Notification
You can initialize the Notification from any element because the widget does not manipulate the content of that element. The element will be hidden if the widget is used with popup notifications or if static notifications are not appended to the Notification element. In these two cases it is assumed that the element will not be needed. However, if the Notification element is intended to contain static (non-popup) notifications, then its tag is recommended to be such so as to allow the nesting of elements inside the notification template. For example, inline elements, such as <span>, <a>, or <em>, cannot contain block elements, such as <div>, <p>, <ul>, <li>, or headings. It is perfectly fine to use a <div> element for initiating the widget.
The following example demonstrates how to initialize the Notification and what its basic usage is.
<span id="notification"></span>
<script>
$(function(){
var notificationElement = $("#notification");
// Initialize the widget.
notificationElement.kendoNotification();
// Get the widget object.
var notificationWidget = notificationElement.data("kendoNotification");
// Display a "foo" message.
notificationWidget.show("foo");
});
</script>
Basic Configuration
Each Notification is rendered inside the <div> wrapper element. TYPE denotes if the notification type is built-in or custom, for example, k-notification-info or k-notification-success.
<div class="k-widget k-notification k-notification-TYPE" data-role="popup">
<!-- ... default or custom template content ... -->
</div>
When the widget displays popups, the div.k-notification is nested inside an absolute or fixed positioned div.k-animation-container which is an element that wraps every Kendo UI popup. When the widget displays static notifications, the div.k-notification is a child of the element which is specified by the appendTo setting of the widget.
The following example demonstrates the default template of the Notification. The markup is rendered inside the div.k-notification element.
<div class="k-notification-wrap">
<span class="k-icon k-i-note">#=typeIcon#</span>
#=content#
<span class="k-icon k-i-close">Hide</span>
</div>
Functionality and Features
Events
The Notification exposes the show and hide events. show fires when the showing animation starts. hide fires when the hiding animation starts. For a runable example, refer to the demo on using the events of the Notification.
Referencing Existing Instances
To access an existing Notification instance, use the .data("kendoNotification") jQuery method that is executed by the jQuery object of the originating element. For more information, refer to the article getting a reference to a Kendo UI widget. Once a reference is established, use the Notification API to control its behavior.