ui.igNotifier

ui.igNotifier_image

Code Sample

 
    <!DOCTYPE html>
    <html>
    <head>
         <!--Ignite UI Required Combined CSS Files-->
        <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
        <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

        <script src="js/modernizr-latest.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>

         <!--Ignite UI Required Combined JavaScript Files--> 
        <script src="js/infragistics.core.js"></script>
        <script src="js/infragistics.lob.js"></script>

        <script type="text/javascript">
   
            $(document).ready(function () {

               $("#successEditor").igTextEditor({
                    placeHolder:"Focus me."
                });
            
                $("#successEditor").igNotifier({
                    showOn: "focus",
                    state: "success" ,
                    direction: "right",
                    showIcon: "true",
                    mode:"popover", 
                    messages: {
                        info: "Information about the state of the input.",
                        success: "Well done",
                        warning: "Warning",
                        error: "Error!"
                    }
                });
            });

        </script>
    </head>
    <body>
        <div id="successEditor"></div>
    </body>
    </html>
    

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.popover.js

Inherits

  • allowCSSOnTarget

    Type:
    bool
    Default:
    true

    Allows setting the respective state CSS on the target element (used to apply border color by default).

    Code Sample

     
    				//Initialize
    				$('.selector').igNotifier({
    					allowCSSOnTarget: true
    				});
    
                    //Get
                    var allowCSSOnTarget = $(".selector").igNotifier("option", "allowCSSOnTarget");
    
                    //Set
                    $(".selector").igNotifier("option", "allowCSSOnTarget", false);
    				 
  • animationDuration

    Type:
    number
    Default:
    250

    Gets/Sets the time in milliseconds the notification fades in and out when showing/hiding.

    Code Sample

     
    				//Initialize
                    $('.selector').igNotifier({
                      animationDuration: 300
                    });
    
                    //Get
                    var animationDuration = $(".selector").igNotifier("option", "animationDuration");
    
                    //Set
                    $(".selector").igNotifier("option", "animationDuration", 300);
    				 
  • animationSlideDistance

    Type:
    number
    Default:
    5

    Gets/Sets the distance in pixels a notification popover slides outwards as it's shown.

    Code Sample

     
    				//Initialize
    				$('.selector').igNotifier({
    					animationSlideDistance: 5
    
    				//Get
    				var animationSlideDistance = $(".selector").igNotifier("option", "animationSlideDistance");
    
    				//Set
    				$(".selector").igNotifier("option", "animationSlideDistance", 5);
    				 
  • appendTo

    Type:
    enumeration
    Default:
    body

    Controls where the popover DOM should be attached to (only applies to popovers).

    Members

    • string
    • Type:string
    • A valid jQuery selector for the element.
    • object
    • Type:object
    • A reference to the parent jQuery object.

    Code Sample

     
    				//Initialize
                    $('.selector').igNotifier({
                      appendTo: "body"
                    });
                    //Get
                    var appendTo = $(".selector").igNotifier("option", "appendTo");
    				 
  • closeOnBlur

    Type:
    bool
    Default:
    false

    Controls whether the popover will close on blur or not. This option has effect only when the corresponding showOn is set (manual by default).

    Code Sample

     
    				//Initialize
                    $('.selector').igNotifier({
                      closeOnBlur: true
                    });
    
                    //Get
                    var closeOnBlur = $(".selector").igNotifier("option", "closeOnBlur");
    
                    //Set
                    $(".selector").igNotifier("option", "closeOnBlur", true);
    				 
  • containment
    Inherited

    Type:
    object
    Default:
    null

    Sets the containment for the popover. Accepts a jQuery object.

    Code Sample

     
                    //Initialize
                    $(".selector").igNotifier({
                        containment: $( '#notifierDivElement' )
                    });
                      
                    // Get
                    var containment = $(".selector").igNotifier("option", "containment");
                     
                    // Set
                    $(".selector").igNotifier("option", "containment", $( '#notifierDivElement' ));
          
  • contentTemplate

    Type:
    enumeration
    Default:
    <span class={0}><span class={1}></span></span>{2}

    Gets/Sets the content for the popover container. Templated with parameters by default: {0} - icon container class, {1} - the icon class and {2} - message text.

    Members

    • string
    • Type:string
    • String content of the popover container.
    • function
    • Type:function
    • Function which is a callback that should return the content. Use the 'this' value to access the target DOM element and passed argument for state value. Result can also include the same template parametes.

    Code Sample

     
    				//Initialize
                        // string content for the popover container
                        $(".selector").igNotifier({
                            contentTemplate:"<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' /> {1}"
                        });
                        //Get
                        var contentFunction = $(".selector").igNotifier("option", "contentTemplate");
                        // Set
                        // Accepts setting the value only if string type is passed
                        $(".selector").igNotifier("option", "contentTemplate", "<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' /> {1}");
    				 
  • direction
    Inherited

    Type:
    enumeration
    Default:
    auto

    controls the direction in which the control shows relative to the target element.

    Members

    • auto
    • Type:string
    • lets the control show on the side where enough space is available with the following priority top > bottom > right > left.
    • left
    • Type:string
    • shows popover on the left side of the target element.
    • right
    • Type:string
    • shows popover on the right side of the target element.
    • top
    • Type:string
    • shows popover on the top of the target element.
    • bottom
    • Type:string
    • shows popover on the bottom of the target element.

    Code Sample

     
                    //Initialize
                    $(".selector").igNotifier({
                        direction: "right"
                    });
                      
                    // Get
                    var direction = $(".selector").igNotifier("option", "direction");
                     
                    // Set
                    $(".selector").igNotifier("option", "direction", "top");
          
  • headerTemplate

    Type:
    object
    Default:
    {}

    Sets the content for the popover header.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    					headerTemplate: {
    						closeButton: false
    					}
    				});
    
    				//Get
    				var headerTemplate = $(".selector").igNotifier("option", "headerTemplate");
    				 
    • closeButton

      Type:
      bool
      Default:
      true

      Controls whether the popover renders a functional close button.

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					headerTemplate: {
      						closeButton : false,
      						title : null
      					}
      				});
      
      				//Get
      				var title = $(".selector").igNotifier("option", "headerTemplate");
      				 
    • title

      Type:
      string
      Default:
      null

      Sets the content for the popover header.

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					headerTemplate: {
      						closeButton : false,
      						title : null
      					}
      				});
      
      				//Get
      				var title = $(".selector").igNotifier("option", "headerTemplate");
      				 
  • height
    Inherited

    Type:
    enumeration
    Default:
    null

    defines height for the popover. leave null for auto.

    Members

      • number
      • The height can be set as a number.
      • string
      • The height can be set in pixels (px).

    Code Sample

          //Initialize
          $(".selector").igNotifier({
              height: 200
          });
      
          // Get
          var height = $(".selector").igNotifier("option", "height");
          
  • maxHeight
    Inherited

    Type:
    enumeration
    Default:
    200

    defines height the popover won't exceed even if no specific one is set.

    Members

      • number
      • The max height can be set as a number.
      • string
      • The max height can be set in pixels (px).

    Code Sample

     
          //Initialize
          $(".selector").igNotifier({
              maxHeight: 200
          });
      
          // Get
          var maxHeight = $(".selector").igNotifier("option", "maxHeight");
          
          
  • maxWidth
    Inherited

    Type:
    enumeration
    Default:
    200

    defines width the popover won't exceed even if no specific one is set.

    Members

      • number
      • The maxWidth can be set as a number.
      • string
      • The maxWidth can be set in pixels (px).

    Code Sample

     
          //Initialize
          $(".selector").igNotifier({
              maxWidth: 300
          });
      
          // Get
          var maxWidth = $(".selector").igNotifier("option", "maxWidth");
          
  • messages

    Type:
    object
    Default:
    {}

    A set of default messages for each state.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    					messages: {
    						success:"Well done!",
    						info: "Info about the input status.",
    						warning: "Warning",
    						error: "Error"
    					}
    				});
    
    				//Get
    				var messages = $(".selector").igNotifier("option", "messages");
    
    				//Set
    				$(".selector").igNotifier("option", "messages", {success: "Well done!"});
    				 
    • error

      Type:
      string
      Default:
      "Error"

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					messages: {
      						error: "Error"
      					}
      				});
      
      				//Get
      				var messages = $(".selector").igNotifier("option", "messages");
      
      				//Set
      				$(".selector").igNotifier("option", "messages", {error: "Something went wrong!"});
      				 
    • info

      Type:
      string
      Default:
      ""

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					messages: {
      						info: "Info"
      					}
      				});
      
      				//Get
      				var messages = $(".selector").igNotifier("option", "messages");
      
      				//Set
      				$(".selector").igNotifier("option", "messages", {info: "Info"});
      				 
    • success

      Type:
      string
      Default:
      "Success"

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					messages: {
      						success:"Well done!"
      					}
      				});
      
      				//Get
      				var messages = $(".selector").igNotifier("option", "messages");
      
      				//Set
      				$(".selector").igNotifier("option", "messages", {success: "Well done!"});
      				 
    • warning

      Type:
      string
      Default:
      "Warning"

      Code Sample

       
      				//Initialize
      				$(".selector").igNotifier({
      					messages: {
      						warning: "Warning"
      					}
      				});
      
      				//Get
      				var messages = $(".selector").igNotifier("option", "messages");
      
      				//Set
      				$(".selector").igNotifier("option", "messages", {warning: "Warning"});
      				 
  • minWidth
    Inherited

    Type:
    enumeration
    Default:
    60

    defines width the popover won't go under the value even if no specific one is set.

    Members

      • number
      • The minWidth can be set as a number.
      • string
      • The minWidth can be set in pixels (px).

    Code Sample

     
                //Initialize
                $('.selector').igNotifier({
                    minWidth: "50px"
    
                //Get
                var minWidth = $(".selector").igNotifier("option", "minWidth");
     
                //Set
                $(".selector").igNotifier("option", "minWidth", 50)
          
  • mode

    Type:
    enumeration
    Default:
    auto

    Controls the positioning mode of messages. Setting a mode will override the default behavior which is auto. Note: Inline element uses a block container as is always placed after the target.

    Members

    • auto
    • Type:string
    • Uses popover for info and warning messages and inline for errors and success.
    • popover
    • Type:string
    • Displays messages in a configurable popover.
    • inline
    • Type:string
    • Displays messages in a simplified notification text under the target.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    					mode: "inline"
    				});
    				//Get
    				var mode = $(".selector").igNotifier("option", "mode");
    				//Set
    				$(".selector").igNotifier("option", "mode", "popover");
    				 
  • notifyLevel

    Type:
    enumeration
    Default:
    success

    Controls the level of notifications shown by automatic and manual messages using the notify method. Use show to ignore the level.

    Members

    • success
    • Type:string
    • Show all types of messages.
    • info
    • Type:string
    • Show everything from info level messages up.
    • warning
    • Type:string
    • Show everything from warning level messages up.
    • error
    • Type:string
    • Show only error messages.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    					notifyLevel: "error"
    				});
    				//Get
    				var notifyLevel = $(".selector").igNotifier("option", "notifyLevel");
    				//Set
    				$(".selector").igNotifier("option", "notifyLevel", "info");
    				 
  • position
    Inherited

    Type:
    enumeration
    Default:
    auto

    controls the position of the popover according to the target element in case the popover is larger than the target on the side we want to position, if the popover is smaller it should always be in the middle of the visible area.

    Members

    • auto
    • Type:string
    • lets the control choose a position depending on available space with the following priority balanced > end > start.
    • balanced
    • Type:string
    • the popover is positioned at the middle of the target element.
    • start
    • Type:string
    • the popover is positioned at the beginning of the target element.
    • end
    • Type:string
    • the popover is positioned at the end of the target element.

    Code Sample

     
          //Initialize
          $(".selector").igNotifier({
              position: "balanced"
          });
      
          // Get
          var position = $(".selector").igNotifier("option", "position");
     
          // Set
          $(".selector").igNotifier("option", "position", "start");
          
  • showIcon

    Type:
    bool
    Default:
    false

    Allows rendering a span with the respective state CSS to display jQuery UI framework icons.

    Code Sample

     
    				//Initialize
    				$('.selector').igNotifier({
    					showIcon: true
    
    				//Get
    				var showIcon = $(".selector").igNotifier("option", "showIcon");
    
    				//Set
    				$(".selector").igNotifier("option", "showIcon", true);
    				 
  • showOn

    Type:
    enumeration
    Default:
    manual

    Sets the event on which the notification will be shown. Predefined values are "mouseenter", "click" and "focus".

    Members

    • mouseenter
    • Type:string
    • The popover is shown on mouse enter in the target element.
    • click
    • Type:string
    • The popover is shown on click on the target element.
    • focus
    • Type:string
    • The popover is shown on focusing the target element.
    • manual
    • Type:string
    • The popover is shown manually.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    						showOn: "focus"
    				});
    				//Get
    				var showOn = $(".selector").igNotifier("option", "showOn");
    				 
  • state

    Type:
    enumeration
    Default:
    info

    Gets/Sets the current state of the igNotifier messages. State controls what CSS classes are applied to the messages and target and has interactions with other options as well.

    Members

    • success
    • Type:string
    • Messages and target CSS have success styles applied.
    • info
    • Type:string
    • Messages have info applied. Target is unaffected.
    • warning
    • Type:string
    • Messages and target CSS have warning styles applied.
    • error
    • Type:string
    • Messages and target CSS have error styles applied.

    Code Sample

     
    				//Initialize
    				$(".selector").igNotifier({
    					state: "success"
    				});
    				//Get
    				var state = $(".selector").igNotifier("option", "state");
    				//Set
    				$(".selector").igNotifier("option", "state", "success");
    				 
  • width
    Inherited

    Type:
    enumeration
    Default:
    null

    defines width for the popover. leave null for auto.

    Members

      • number
      • The width can be set as a number.
      • string
      • The width can be set in pixels (px).

    Code Sample

     
          //Initialize
          $(".selector").igNotifier({
                width: "200px"  
          });
      
          // Get
          var width = $(".selector").igNotifier("option", "width");
          

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • hidden
    Inherited

    Cancellable:
    false

    Event fired after popover is hidden.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • element
          Type:jQuery

          Gets the element the popover is hidden for.

        • content
          Type:String

          Gets the content displayed in the popover as a string.

        • popover
          Type:jQuery

          Gets the popover element hidden.

        • owner
          Type:Object

          Gets reference to the igPopover widget.

    Code Sample

     
          ///EVENTS
          //Bind after initialization    
          $(document).delegate(".selector", "ignotifierhidden", function (evt, ui) {
              //return the triggered event
              evt;
         
              // reference to the igNotifier widget.
              ui.owner;
      
              // reference the element the popover hid for.
              ui.element;
      
              // reference the current content displayed in the popover as a string.
              ui.content;
      
              // reference the popover element hidden.
              ui.popover;
          });
      
          //Initialize
          $(".selector").igNotifier({
              hidden: function (evt, ui) {
                  ...
             }
          })
                
  • hiding
    Inherited

    Cancellable:
    true

    Event fired before popover is hidden.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • element
          Type:jQuery

          Gets the element the popover will hide for.

        • content
          Type:String

          Gets the current content displayed in the popover as a string.

        • popover
          Type:jQuery

          Gets the popover element hiding.

        • owner
          Type:Object

          Gets reference to the igPopover widget.

    Code Sample

     
          //Bind after initialization    
          $(document).delegate(".selector", "ignotifierhiding", function (evt, ui) {
              //return the triggered event
              evt;
         
              // reference to the igNotifier widget.
              ui.owner;
      
              // reference the element the popover will hide for.
              ui.element;
      
              // reference the current content in the popover as a string.
              ui.content;
      
              // reference the popover element hiding.
              ui.popover;
          });
      
          //Initialize
          $(".selector").igNotifier({
              hiding: function (evt, ui) {
                  ...
              }
          });
          
  • showing
    Inherited

    Cancellable:
    true

    Event fired before popover is shown.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • element
          Type:jQuery

          Gets the element the popover will show for.

        • content
          Type:String

          Gets or set the content to be shown as a string.

        • popover
          Type:jQuery

          Gets the popover element showing.

        • owner
          Type:Object

          Gets a reference to the igPopover widget.

    Code Sample

     
            //Bind after initialization    
            $(document).delegate(".selector", "ignotifiershowing", function (evt, ui) {
                //return the triggered event
                evt;
         
                // reference to the igNotifier widget.
                ui.owner;
      
                // reference the element the popover will show for.
                ui.element;
      
                // reference the current content to be shown as a string.
                ui.content;
      
                // reference the popover element showing.
                ui.popover;
            });
      
            //Initialize
            $(".selector").igNotifier({
                showing: function (evt, ui) {
                    ...
               }
            });
          
  • shown
    Inherited

    Cancellable:
    false

    Event fired after popover is shown.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • element
          Type:jQuery

          Gets the element the popover showed for.

        • content
          Type:String

          Gets the content that was shown as a string.

        • popover
          Type:jQuery

          Gets the popover element showing.

        • owner
          Type:Object

          Gets a reference to the igPopover widget.

    Code Sample

     
            //Bind after initialization    
            $(document).delegate(".selector", "ignotifiershown", function (evt, ui) {
                //return the triggered event
                evt;
         
                // reference to the igNotifier widget.
                ui.owner;
      
                // reference the element the popover showed for.
                ui.element;
      
                // reference the content that was shown as a string.
                ui.content;
      
                // reference the popover element shown.
                ui.popover;
            });
      
            //Initialize
            $(".selector").igNotifier({
                shown: function (evt, ui) {
                    ...
               }
            });
          
  • container
    Inherited

    .igNotifier( "container" );
    Return Type:
    object

    Returns the container for the popover contents.

    Code Sample

     
    				$( ".selector" ).igNotifier( "destroy" );
    				 
  • destroy

    .igNotifier( "destroy" );

    Destroys the widget.

    Code Sample

     
    				$( ".selector" ).igNotifier( "destroy" );
    				 
  • getContent
    Inherited

    .igNotifier( "getContent" );
    Return Type:
    string
    Return Type Description:
    The popover content.

    Gets the currently set content for the popover container.

    Code Sample

     var currentContent = $( ".selector" ).igNotifier( "getContent" ); 
  • getCoordinates
    Inherited

    .igNotifier( "getCoordinates" );
    Return Type:
    object
    Return Type Description:
    The popover coordinates in pixels.

    Gets the current coordinates of the popover.

    Code Sample

     var coordinates =  $( ".selector" ).igNotifier( "getCoordinates" ); 
  • hide
    Inherited

    .igNotifier( "hide" );

    Hides the popover for the specified target.

    Code Sample

     $( ".selector" ).igNotifier( "hide" ); 
  • id
    Inherited

    .igNotifier( "id" );
    Return Type:
    string

    Returns the ID of the element the popover is attached to.

    Code Sample

     var notifierID = $( ".selector" ).igNotifier( "id" ); 
  • isVisible

    .igNotifier( "isVisible" );

    Returns true if the notification is currently visible.

    Code Sample

     
    				var isVisible = $( ".selector" ).igNotifier( "isVisible" );
    				 
  • notify

    .igNotifier( "notify", state:object, [message:string] );

    Triggers a notification with a certain state and optional message. The notifyLevel option determines if the notification will be displayed.

    • state
    • Type:object
    • The state to show notification for.
    • message
    • Type:string
    • Optional
    • Optional message to show, overrides defaults.

    Code Sample

     
    				$( ".selector" ).igNotifier( "notify", "success", "Well Done");
    				 
  • setContent
    Inherited

    .igNotifier( "setContent", newCnt:string );

    Sets the content for the popover container.

    • newCnt
    • Type:string
    • The popover content to set.

    Code Sample

     $( ".selector" ).igNotifier( "setContent" , "New Content To be Set"); 
  • setCoordinates
    Inherited

    .igNotifier( "setCoordinates", pos:object );

    Sets the popover to specific coordinates.

    • pos
    • Type:object
    • The popover coordinates in pixels.

    Code Sample

     
           var position = {top: 300, left: 450};
           $( ".selector" ).igNotifier( "setCoordinates" , position);
          
  • show
    Inherited

    .igNotifier( "show", [trg:domelement], [content:string] );

    Shows the popover for the specified target.

    • trg
    • Type:domelement
    • Optional
    • The element to show popover for.
    • content
    • Type:string
    • Optional
    • The string to set for the popover to show.

    Code Sample

     
          // show the notifier for the target it has been initialized before
           $( ".selector" ).igNotifier( "show" );
      
           // show the notifier for a new target and with s new content to be displayed
           $( ".selector" ).igNotifier( "show", $( "#notifier_target" ), "Content to be displayed in the notifier");
          
  • target
    Inherited

    .igNotifier( "target" );
    Return Type:
    object
    Return Type Description:
    The current target.

    Gets the popover current target.

    Code Sample

     var target =  $( ".selector" ).igNotifier( "target" ); 
  • ui-igpopover-arrow ui-igpopover-arrow-

    Classes applied to the popover arrow (like ui-igpopover-arrow-top, ui-igpopover-arrow-left, etc).
  • ui-widget ui-igpopover ui-ignotify

    Classes applied to the main popover container.
  • ui-icon ui-icon-closethick ui-igpopover-close-button

    Classes applied to the close button.
  • ui-ignotify-content

    Class applied to the inner notification container.
  • ui-icon ui-icon-circle-close

    JQuery UI Icon class for error state.
  • ui-ignotify-error

    Classes applied to the main popover container and target with error state.
  • ui-ignotify-icon-container

    Class applied to the inner icon container SPAN.
  • ui-icon ui-icon-info

    JQuery UI Icon class for information state.
  • ui-ignotify-info

    Classes applied to the main popover container and target with information state.
  • ui-ignotify-inline

    Class applied to the main container for inline notifications.
  • ui-icon ui-icon-circle-check

    JQuery UI Icon class for success state.
  • ui-ignotify-success

    Classes applied to the main popover container and target with success state.
  • ui-igpopover-title

    Classes applied to the title container(if title is defined in options).
  • ui-icon ui-icon-alert

    JQuery UI Icon class for success state.
  • ui-ignotify-warn

    Classes applied to the main popover container and target with warning state.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.