- Overview
- Documents
Simply Toast is a jquery plguin that displays simple toast messages for your websites.
All css styles were extracted from bootstrap, so, if you already use bootstrap, you don't need simply-toast.css
Source: ericprieto.github.io
Sep 02, 2014 in Tooltip 6322 views
Simply Toast is a jquery plguin that displays simple toast messages for your websites.
All css styles were extracted from bootstrap, so, if you already use bootstrap, you don't need simply-toast.css
Source: ericprieto.github.io
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="bower_components/simply-toast/simply-toast.min.css"> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/simply-toast/simply-toast.min.js"></script>
2. JAVASCRIPT
$.simplyToast('This is a success message!', 'success');
$.simplyToast('This is a danger message!', 'danger');
$.simplyToast('This is a info message!', 'info');
$.simplyToast('This is also an info message!'); //'info' is the default type
$.simplyToast('This is a warning message!', 'warning');
3. OPTIONS
appendTo: "body",
customClass: false,
type: "info",
offset:
{
from: "top",
amount: 20
},
align: "right",
minWidth: 250,
maxWidth: 450,
delay: 4000,
allowDismiss: true,
spacing: 10
4. METHODS
// To create a toast message
var toast = $.simplyToast(message, type='info', options);
// To manually remove a toast message
$.simplyToast.remove(toast);
// To extend default options
$.extend(true, $.simplyToast.defaultOptions,
{
'type': 'success'
});
Tagged with:
simply toast
messages
bootstrap
toast
success message
danger message
info message
warning message
Related Articles
JS Tutorial