javascript - How do I implement Toastr JS? -
i new js , not sure how make work on page. below have. how must make alert show?
i added source correctly not sure how render alert.
<!doctype html> <html> <head> <title>toast</title> <link href="toastr.css" rel="stylesheet"/> <script src="toastr.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script> $(document).ready(function() { //toastr.info('are 6 fingered man?') command: toastr[success](" ", "settings saved!") toastr.options: { "debug": false, "positionclass": "toast-top-right", "onclick": null, "fadein": 300, "fadeout": 1000, "timeout": 5000, "extendedtimeout": 1000 } }); </script> </head> <body> </body> </html>
why need jquery-migrate-1.2.1.min.js
file?
toastr nice componente, , can show messages theses commands:
// success - green box toastr.success('success messages'); // errors - red box toastr.error('errors messages'); // warning - orange box toastr.warning('warning messages'); // info - blue box toastr.info('info messages');
you can change default behaviour using this:
toastr.options.timeout = 3000; // 3s
edits
a sample of use:
$(document).ready(function() { // show when page load toastr.info('page loaded!'); $('#linkbutton').click(function() { // show when button clicked toastr.success('click button'); }); });
and html:
<a id='linkbutton'>show message</a>
Comments
Post a Comment