Growl is a notification widget to display messages as an overlay.
//initialize $('#default').puigrowl(); //show messages $('#default').puigrowl('show', [{severity: 'info', summary: 'Message Summary', detail: 'Message Detail'}]);
<div id="default" />
Name | Type | Default | Description |
---|---|---|---|
sticky | boolean | false | Sticky messages do not disappear after a timeout defined by life. |
life | int | 3000 | Defines timeout in milliseconds to remove messages. |
Name | Parameters | Description |
---|---|---|
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. |
<script type="text/javascript"> $(function() { $('#default').puigrowl(); $('#btn-info').click(function() { addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'}]); }); $('#btn-warn').click(function() { addMessage([{severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'}]); }); $('#btn-error').click(function() { addMessage([{severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]); }); $('#btn-multiple').click(function() { addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'} ,{severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'} ,{severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]); }); addMessage = function(msg) { $('#default').puigrowl('show', msg); } $('#content button').puibutton(); }); </script>
<div id="default" /> <button id="btn-info" type="button">Info</button> <button id="btn-warn" type="button">Warn</button> <button id="btn-error" type="button">Error</button> <button id="btn-multiple" type="button">Multiple</button>