This time I will share jQuery Plugin and tutorial about Minimalist Material Snackbar Plugin With jQuery – mSnackbar, hope it will help you in programming stack.
| File Size: | 7.09 KB |
|---|---|
| Views Total: | 1240 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
mSnackbar is a super tiny jQuery plugin used to create Material Design inspired snackbars animated using CSS3 transitions and transforms.
Snackbars provide brief feedback about an operation through a message at the bottom of the screen. They contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. Learn more about Material Design Snackbars.
How to use it:
1. Copy and include the style sheet mSnackbar.css, and the JavaScript file mSnackbar.min.js in your jQuery project.
1 |
<link rel="stylesheet" href="dist/mSnackbar.css"> |
2 |
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> |
3 |
<script src="dist/mSnackbar.min.js"></script> |
2. The JavaScript to create a basic snackbar with custom text messages displayed at the bottom right of the webpage.
1 |
$.mSnackbar('This is a message'); |
3. Dismiss the snackbar programmatically.
1 |
$.mSnackbar().close(); |
4. Auto dismiss the snackbar using setTimeout() method as this:
1 |
setTimeout(function(){ |
2 |
$.mSnackbar().close();}, |
3 |
5000 // auto dismiss after 5 seconds |
4 |
); |
Change log:
2016-11-28
- fix timeout bug
2016-11-27
This awesome jQuery plugin is developed by lukas-vollmer. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
