$('#notify').puinotify();
<div id="notify"></div>
Name | Type | Default | Description |
---|---|---|---|
position | string | top | Defines position of notify, can be "top" or "bottom". |
visible | boolean | false | Specifies if notify should be auto open on load. |
animate | boolean | true | Show and Hide events are animated by default, setting this option would disable effects. |
effectSpeed | int/string | normal | Speed in milliseconds or keywords like slow, normal and fast. |
easing | string | swing | Optional easing to use in animation. |
Name | Parameters | Description |
---|---|---|
beforeShow | event: puinotifybeforeShow event | Fired before showing. |
afterShow | event: puinotifyafterShow event | Fired after showing. |
beforeHide | event: puinotifybeforeHide event | Fired before hiding. |
afterHide | event: puinotifyafterHide event | Fired after hiding. |
$('#default').puinotify({ beforeShow: function(event) { //... } });
Name | Parameters | Description |
---|---|---|
show | content: Content to display as html. | Shows the notify after updating with optional content. |
hide | - | Hides the notify. |
update | content: Content to display as html. | Updates content of notify. |
option | name: Name of the option | Returns the value of the option. |
option | name: Name of the option, value: Value of the option | Set the value of the option. |
$('#default').puinotify('show');
$(function() { $('#t-btn-show').puibutton({ click: function() { $('#notifytop').puinotify('show', '<h1>PrimeUI Notify Widget</h1> <p>Notify is a notification bar that can be positioned at the top or bottom of screen.</p>'); } }); $('#b-btn-show').puibutton({ click: function() { $('#notifybottom').puinotify('show', '<h1>PrimeUI Notify Widget</h1> <p>Notify is a notification bar that can be positioned at the top or bottom of screen.</p>'); } }); $('#notifytop').puinotify({ easing: 'easeInOutCirc' }); $('#notifybottom').puinotify({ easing: 'easeInOutCirc', position: 'bottom' }); });
<button id="t-btn-show" type="button">Top</button> <button id="b-btn-show" type="button">Bottom</button> <div id="notifytop"></div> <div id="notifybottom"></div>