jQuery Notification API

Name Type Default

appendContainer String null

If set, specifies the notification container. The value of appendContainer should be a String with the id of the container element preceeded by "#".

Code examples

Set the appendContainer property.

$('#jqxNotification').jqxNotification({ appendContainer: "#container" });

Get the appendContainer property.

var appendContainer = $('#jqxNotification').jqxNotification('appendContainer');

Try it: appendContainer is set to "#container"

autoOpen Boolean false

Sets or gets whether the notification will open automatically.

Code examples

Set the autoOpen property.

$('#jqxNotification').jqxNotification({ autoOpen: true });

Get the notificationOffset property.

var autoOpen = $('#jqxNotification').jqxNotification('autoOpen');

Try it: autoOpen is set to true

animationOpenDelay Number/String 400

Sets or gets the duration of the notification animation at open.

Code examples

Set the animationOpenDelay property.

$('#jqxNotification').jqxNotification({ animationOpenDelay: "fast" });

Get the animationOpenDelay property.

var animationOpenDelay = $('#jqxNotification').jqxNotification('animationOpenDelay');

Try it: animationOpenDelay is set to 600

animationCloseDelay Number/String 800

Sets or gets the duration of the tooltip animation at close.

Code examples

Set the animationCloseDelay property.

$('#jqxNotification').jqxNotification({ animationCloseDelay: 1000 });

Get the animationCloseDelay property.

var animationCloseDelay = $('#jqxNotification').jqxNotification('animationCloseDelay');

Try it: animationCloseDelay is set to 1000

autoClose Boolean true

Sets or gets whether the notification will automatically close after duration equal to the autoCloseDelay property.

Code examples

Set the autoClose property.

$('#jqxNotification').jqxNotification({ autoClose: false });

Get the autoClose property.

var autoClose = $('#jqxNotification').jqxNotification('autoClose');

Try it: autoClose is set to false

autoCloseDelay Number/String 3000

Sets or gets the duration after which the notification automatically closes (works only if the autoClose property is set to true).

Code examples

Set the autoCloseDelay property.

$('#jqxNotification').jqxNotification({ autoCloseDelay: 1000 });

Get the autoCloseDelay property.

var autoCloseDelay = $('#jqxNotification').jqxNotification('autoCloseDelay');

Try it: autoCloseDelay is set to 5000

blink Boolean false

Sets or gets whether the notification blinks when opened.

Code examples

Set the blink property.

$('#jqxNotification').jqxNotification({ blink: true });

Get the blink property.

var blink = $('#jqxNotification').jqxNotification('blink');

Try it: blink is set to true

browserBoundsOffset Number/String 5

Sets ot gets the notifications' offset from the window bounds.

Code examples

Set the browserBoundsOffset property.

$('#jqxNotification').jqxNotification({ browserBoundsOffset: 10 });

Get the browserBoundsOffset property.

var browserBoundsOffset = $('#jqxNotification').jqxNotification('browserBoundsOffset');

Try it: browserBoundsOffset is set to 10

closeOnClick Boolean true

Sets or gets whether the notification will close if it is clicked.

Code examples

Set the closeOnClick property.

$('#jqxNotification').jqxNotification({ closeOnClick: true });

Get the closeOnClick property.

var closeOnClick = $('#jqxNotification').jqxNotification('closeOnClick');

Try it: closeOnClick is set to false

disabled Boolean false

Sets or gets whether the notification is disabled (it cannot be opened).

Code examples

Set the disabled property.

$('#jqxNotification').jqxNotification({ disabled: true });

Get the disabled property.

var disabled = $('#jqxNotification').jqxNotification('disabled');

Try it: disabled is set to true

height Number/String 'auto'

Sets ot gets the notification's height.

Code examples

Set the height property.

$("#jqxNotification").jqxNotification({ height: 25 });

Get the height property.

var height = $('#jqxNotification').jqxNotification('height');

Try it: height is set to "100px"

hoverOpacity Number 1

Sets or gets the notification's opacity when it is hovered with the mouse.

Code examples

Set the hoverOpacity property.

$('#jqxNotification').jqxNotification({ hoverOpacity: 10 });

Get the hoverOpacity property.

var hoverOpacity = $('#jqxNotification').jqxNotification('hoverOpacity');

Try it: hoverOpacity is set to 2

icon Object null

Sets or gets an object which specifies a custom notification icon. The icon property is disregarded if template is set.

Object fields:

width

height

url

padding - specifies the distance from the icon to the content.

Code examples

Set the icon property.

$('#jqxNotification').jqxNotification({ icon: { width: 25, height: 25, url:
                            '../../images/smiley.png', padding: 5} });

Get the icon property.

var icon = $('#jqxNotification').jqxNotification('icon');

Try it: icon is set to a custom object

notificationOffset Number/String 5

Sets or gets the offset between notifications.

Code examples

Set the notificationOffset property.

$('#jqxNotification').jqxNotification({ notificationOffset: 10 });

Get the notificationOffset property.

var toggled = $('#jqxNotification').jqxNotification('notificationOffset');

Try it: notificationOffset is set to 10

opacity Number 0.9

Sets or gets the notification's opacity.

Code examples

Set the opacity property.

$('#jqxNotification').jqxNotification({ opacity: 1 });

Get the notificationOffset property.

var opacity = $('#jqxNotification').jqxNotification('opacity');

Try it: opacity is set to 1

position String 'top-right'

Sets the part of the browser window where the notifications will be positioned. The position property is disregarded if appendContainer is set.

Possible Values:

'top-left'

'top-right'

'bottom-left'

'bottom-right'

Code examples

Set the position property.

$('#jqxNotification').jqxNotification({ position: 'top-left' });

Get the position property.

var position = $('#jqxNotification').jqxNotification('position');

Try it: position is set to "top-left"

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxNotification').jqxNotification({ rtl : true });

Get the rtl property.

var rtl = $('#jqxNotification').jqxNotification('rtl');

Try it: rtl is set to true

showCloseButton Boolean true

Sets or gets whether to show the notification's close button.

Code examples

Set the showCloseButton property.

$('#jqxNotification').jqxNotification({ showCloseButton: false });

Get the showCloseButton property.

var showCloseButton = $('#jqxNotification').jqxNotification('showCloseButton');

Try it: showCloseButton is set to false

template String 'info'

Sets or gets the notification template.

Possible Values:

'info'

'warning'

'success'

'error'

'mail'

'time'

null

If template is set to null, the theme setting is applied to the notification. In that case, the notification icon can be set with the icon property.

Code examples

Set the template property.

$('#jqxNotification').jqxNotification({ template: 'mail' });

Get the template property.

var template = $('#jqxNotification').jqxNotification('template');

Try it: template is set to 'info'

theme String ''

width Number/String 'auto'

Sets ot gets the notification's width.

Code examples

Set the width property.

$("#jqxNotification").jqxNotification({ width: 100 });

Get the width property.

var width = $('#jqxNotification').jqxNotification('width');

Try it: width is set to "250px"

close Event

This event is triggered when the notification is closed.

Code examples

Bind to the close event by type: jqxNotification.

$('#jqxNotification').on('close', function () { // Some code here. });

Try it: Bind to the close event by type: jqxNotification.

click Event

This event is triggered when the notification is clicked.

Code examples

Bind to the click event by type: jqxNotification.

$('#jqxNotification').on('click', function () { // Some code here. });

Try it: Bind to the click event by type: jqxNotification.

open Event

This event is triggered when the notification is opened.

Code examples

Bind to the open event by type: jqxNotification.

$('#jqxNotification').on('open', function () { // Some code here. });

Try it: Bind to the open event by type: jqxNotification.

closeAll Method

Closes all notification instances.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the closeAll method.

$('#jqxNotification').jqxNotification('closeAll');

Try it: closes all notifications

closeLast Method

Closes the last notification instances.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the closeLast method.

$('#jqxNotification').jqxNotification('closeLast');

Try it: closes the last notifications

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxNotification').jqxNotification('destroy');

Try it: destroy the notification

open Method

Opens the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the open method.

$('#jqxNotification').jqxNotification('open');

Try it: opens the notification

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxNotification').jqxNotification('refresh');

Try it: refresh the notification

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxNotification').jqxNotification('render');

Try it: renders the notification

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples