Elegant Toast Notification Library For jQuery - Notify
File Size: | 21.9 KB |
---|---|
Views Total: | 2442 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Notify is a small jQuery notification plugin used to create Material Toast like notification messages sliding in/out from the edge of your screen.
Key features:
- success, info, error, warn notification types.
- Auto dismisses after a timeout, with a countdown bar.
- LTR and RTL support.
- Open/close callbacks.
- Customize the position of the notification.
How to use it:
1. Link to jQuery library and the Notify plugin's files as follows:
<link href="dist/jquery.notify.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="dist/jquery.notify.js"></script>
2. Create a default toast notification on the webpage. This toast notification will auto dismiss after 4 seconds.
$.notify();
3. All possible options which let you create your own toast notifications.
$.notify({ // where to append the toast notification wrapper: 'body', // toast message message: 'Your request submitted successfuly!', // success, info, error, warn type: 'success', // 1: top-left, 2: top-center, 3: top-right // 4: mid-left, 5: mid-right // 6: bottom-left, 7: bottom-center, 8: bottom-right position: 1, // or 'rtl' dir: 'ltr', // enable/disable auto close autoClose: true, // timeout in milliseconds duration: 4000 });
4. Perform actions when the toast notification opens/closes.
$.notify({ onOpen: null, // function onClose: null // function });
This awesome jQuery plugin is developed by digitalify. For more Advanced Usages, please check the demo page or visit the official website.