New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/create-material-design-snackbars-and-toasts-with-ease/
Create Material Design snackbars and toasts with ease
Download Demo
SnackbarJS is a lightweight and jQuery powered plugin made to work in Bootstrap style, just like the Bootstrap tooltips work.
1. INCLUDE CSS AND JS FILES
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- core CSS of SnackbarJS, find it in /dist --> <link href=snackbar.min.css rel=stylesheet> <!-- the default theme of SnackbarJS, find it in /themes-css --> <link href=material.css rel=stylesheet> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="dist/snackbar.min.js"></script>
2. VIA HTML
<span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span>
3. VIA JAVASCRIPT
$.snackbar(content: "This is my awesome snackbar!");
4. OPTIONS
There are some options to customize SnackbarJS look and beahvior:
var options = content: "Some text", // text of the snackbar style: "toast", // add a custom class to your snackbar timeout: 100 // time in milliseconds after the snackbar autohides, 0 is disabled $.snackbar(options);
Tip: SnackbarJS returns always a jQuery element which corresponds to the snackbar DOM element, you can use it to get the ID of it, or do any kind of stuff with it.
Interact with snackbars
Once you have created a snackbar you can show, hide or toggle it with:
$("#snackbarid").snackbar("show"); $("#snackbarid").snackbar("hide"); $("#snackbarid").snackbar("toggle");
#snackbarid can be both the button with the data-toggle=snackbar attribute or the snackbar element. Calling it on a non-existing snackbar will create it before executing the specificed action.