jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation, jQuery Button, JavaScript Button, jQuery Mobile Button" /> <meta name="description" content="This page represents the help documentation of the jqxNotification, jqxToggleButton, jqxNotification and jqxLinkButton widgets." /> <title>jqxNotification, jqxToggleButton, jqxNotification and jqxLinkButton API Reference </title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>appendContainer</span> </td> <td> <span>String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> If set, specifies the notification container. The value of appendContainer should be a String with the id of the container element preceeded by "#". </p> <h4>Code examples</h4> <p> Set the <code>appendContainer</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ appendContainer: "#container" });</code></pre> <p> Get the <code>appendContainer</code> property. </p> <pre><code>var appendContainer = $('#jqxNotification').jqxNotification('appendContainer');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lnd7P/">appendContainer is set to "#container"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>autoOpen</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the notification will open automatically. </p> <h4>Code examples</h4> <p> Set the <code>autoOpen</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ autoOpen: true }); </code></pre> <p> Get the <code>notificationOffset</code> property. </p> <pre><code>var autoOpen = $('#jqxNotification').jqxNotification('autoOpen');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fa83W/">autoOpen is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>animationOpenDelay</span> </td> <td> <span>Number/String</span> </td> <td>400 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration of the notification animation at open. </p> <h4>Code examples</h4> <p> Set the <code>animationOpenDelay</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ animationOpenDelay: "fast" }); </code></pre> <p> Get the <code>animationOpenDelay</code> property. </p> <pre><code>var animationOpenDelay = $('#jqxNotification').jqxNotification('animationOpenDelay');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A3gZA/">animationOpenDelay is set to 600</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span16'>animationCloseDelay</span> </td> <td> <span>Number/String</span> </td> <td>800 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration of the tooltip animation at close. </p> <h4>Code examples</h4> <p> Set the <code>animationCloseDelay</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ animationCloseDelay: 1000 }); </code></pre> <p> Get the <code>animationCloseDelay</code> property. </p> <pre><code>var animationCloseDelay = $('#jqxNotification').jqxNotification('animationCloseDelay');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SBf88/">animationCloseDelay is set to 1000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span18'>autoClose</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the notification will automatically close after duration equal to the autoCloseDelay property. </p> <h4>Code examples</h4> <p> Set the <code>autoClose</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ autoClose: false }); </code></pre> <p> Get the <code>autoClose</code> property. </p> <pre><code>var autoClose = $('#jqxNotification').jqxNotification('autoClose');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sRY73/">autoClose is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span19'>autoCloseDelay</span> </td> <td> <span>Number/String</span> </td> <td>3000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration after which the notification automatically closes (works only if the autoClose property is set to true). </p> <h4>Code examples</h4> <p> Set the <code>autoCloseDelay</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ autoCloseDelay: 1000 }); </code></pre> <p> Get the <code>autoCloseDelay</code> property. </p> <pre><code>var autoCloseDelay = $('#jqxNotification').jqxNotification('autoCloseDelay');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4UBck/">autoCloseDelay is set to 5000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span23'>blink</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the notification blinks when opened. </p> <h4>Code examples</h4> <p> Set the <code>blink</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ blink: true }); </code></pre> <p> Get the <code>blink</code> property. </p> <pre><code>var blink = $('#jqxNotification').jqxNotification('blink');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ffjfd/">blink is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>browserBoundsOffset</span> </td> <td> <span>Number/String</span> </td> <td>5 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets ot gets the notifications' offset from the window bounds. </p> <h4>Code examples</h4> <p> Set the <code>browserBoundsOffset</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ browserBoundsOffset: 10 }); </code></pre> <p> Get the <code>browserBoundsOffset</code> property. </p> <pre><code>var browserBoundsOffset = $('#jqxNotification').jqxNotification('browserBoundsOffset');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GSG7q/">browserBoundsOffset is set to 10</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>closeOnClick</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the notification will close if it is clicked. </p> <h4>Code examples</h4> <p> Set the <code>closeOnClick</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ closeOnClick: true }); </code></pre> <p> Get the <code>closeOnClick</code> property. </p> <pre><code>var closeOnClick = $('#jqxNotification').jqxNotification('closeOnClick');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C8a3M/">closeOnClick is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span24'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the notification is disabled (it cannot be opened). </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ disabled: true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxNotification').jqxNotification('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6T2zy/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>height</span> </td> <td> <span>Number/String</span> </td> <td>'auto' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets ot gets the notification's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$("#jqxNotification").jqxNotification({ height: 25 });</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxNotification').jqxNotification('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dG3Gx/">height is set to "100px"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>hoverOpacity</span> </td> <td> <span>Number</span> </td> <td>1 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the notification's opacity when it is hovered with the mouse. </p> <h4>Code examples</h4> <p> Set the <code>hoverOpacity</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ hoverOpacity: 10 }); </code></pre> <p> Get the <code>hoverOpacity</code> property. </p> <pre><code>var hoverOpacity = $('#jqxNotification').jqxNotification('hoverOpacity');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B4PAE/">hoverOpacity is set to 2</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span22'>icon</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets an object which specifies a custom notification icon. The icon property is disregarded if template is set. </p> <b>Object fields:</b> <br /> <pre><code>width</code></pre> <pre><code>height</code></pre> <pre><code>url</code></pre> <pre><code>padding</code> - specifies the distance from the icon to the content.</pre> <h4>Code examples</h4> <p> Set the <code>icon</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ icon: { width: 25, height: 25, url: '../../../../images/smiley.png', padding: 5} }); </code></pre> <p> Get the <code>icon</code> property. </p> <pre><code>var icon = $('#jqxNotification').jqxNotification('icon');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3JrUf/">icon is set to a custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>notificationOffset</span> </td> <td> <span>Number/String</span> </td> <td>5 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the offset between notifications. </p> <h4>Code examples</h4> <p> Set the <code>notificationOffset</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ notificationOffset: 10 }); </code></pre> <p> Get the <code>notificationOffset</code> property. </p> <pre><code>var toggled = $('#jqxNotification').jqxNotification('notificationOffset');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D2G43/">notificationOffset is set to 10</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>opacity</span> </td> <td> <span>Number</span> </td> <td>0.9 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the notification's opacity. </p> <h4>Code examples</h4> <p> Set the <code>opacity</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ opacity: 1 }); </code></pre> <p> Get the <code>notificationOffset</code> property. </p> <pre><code>var opacity = $('#jqxNotification').jqxNotification('opacity');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M7aRd/">opacity is set to 1</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>position</span> </td> <td> <span>String</span> </td> <td>'top-right' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the part of the browser window where the notifications will be positioned. The position property is disregarded if appendContainer is set. </p> <b>Possible Values:</b> <br /> <pre><code>'top-left'</code></pre> <pre><code>'top-right'</code></pre> <pre><code>'bottom-left'</code></pre> <pre><code>'bottom-right'</code></pre> <h4>Code examples</h4> <p> Set the <code>position</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ position: 'top-left' }); </code></pre> <p> Get the <code>position</code> property. </p> <pre><code>var position = $('#jqxNotification').jqxNotification('position');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/the9U/">position is set to "top-left"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span51'>rtl</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts. </p> <h4>Code example</h4> <p> Set the <code>rtl</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ rtl : true }); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxNotification').jqxNotification('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/T9HPA/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span20'>showCloseButton</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether to show the notification's close button. </p> <h4>Code examples</h4> <p> Set the <code>showCloseButton</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ showCloseButton: false }); </code></pre> <p> Get the <code>showCloseButton</code> property. </p> <pre><code>var showCloseButton = $('#jqxNotification').jqxNotification('showCloseButton');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R597D/">showCloseButton is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>template</span> </td> <td> <span>String</span> </td> <td>'info' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the notification template. </p> <b>Possible Values:</b> <br /> <pre><code>'info'</code></pre> <pre><code>'warning'</code></pre> <pre><code>'success'</code></pre> <pre><code>'error'</code></pre> <pre><code>'mail'</code></pre> <pre><code>'time'</code></pre> <pre><code>null</code></pre> <p> 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. </p> <h4>Code examples</h4> <p> Set the <code>template</code> property. </p> <pre><code>$('#jqxNotification').jqxNotification({ template: 'mail' }); </code></pre> <p> Get the <code>template</code> property. </p> <pre><code>var template = $('#jqxNotification').jqxNotification('template');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5LmXw/">template is set to 'info'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: <ul> <li>Include the theme's CSS file after jqx.base.css.<br /> The following code example adds the 'energyblue' theme. <pre><code> <pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre> </code></pre> </li> <li>Set the widget's theme property to 'energyblue' when you initialize it. </li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n53BJ/">theme is set to 'energyblue' </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>width</span> </td> <td> <span>Number/String</span> </td> <td>'auto' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets ot gets the notification's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$("#jqxNotification").jqxNotification({ width: 100 });</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxNotification').jqxNotification('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gGzCb/">width is set to "250px"</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span25'>close</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the notification is closed. </p> <h4>Code examples</h4> <p> Bind to the <code>close</code> event by type: jqxNotification. </p> <pre><code>$('#jqxNotification').on('close', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f6wHT/">Bind to the close event by type: jqxNotification.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span26'>click</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the notification is clicked. </p> <h4>Code examples</h4> <p> Bind to the <code>click</code> event by type: jqxNotification. </p> <pre><code>$('#jqxNotification').on('click', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cZ8AD/">Bind to the click event by type: jqxNotification.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>open</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the notification is opened. </p> <h4>Code examples</h4> <p> Bind to the <code>open</code> event by type: jqxNotification. </p> <pre><code>$('#jqxNotification').on('open', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qy6we/">Bind to the open event by type: jqxNotification.</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>closeAll</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Closes all notification instances. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>closeAll</code> method. </p> <pre><code>$('#jqxNotification').jqxNotification('closeAll'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n8yD3/">closes all notifications</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span28'>closeLast</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Closes the last notification instances. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>closeLast</code> method. </p> <pre><code>$('#jqxNotification').jqxNotification('closeLast'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wQbTE/">closes the last notifications</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Destroys the widget. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>destroy</code> method. </p> <pre><code>$('#jqxNotification').jqxNotification('destroy'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X7asy/">destroy the notification</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>open</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' s