Simple Clean Toast Message Plugin with jQuery - dreamAlert
File Size: | 30.3 KB |
---|---|
Views Total: | 2610 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
dreamAlert is a lightweight jQuery plugin helps you display Android toasts- or growl-like notification messages on your webpage or web application. A great way to create info, alert or AJAX loading messages for your end users.
How to use it:
1. Load the jQuery dreamAlert plugin's JavaScript and CSS files in the html document. Make sure you first have jQuery library loaded.
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="jquery.dreamalert.js"></script> <link href="jquery.dreamalert.css"rel="stylesheet">
2. Create a 'Success' toast notification.
$.dreamAlert({ 'type' : 'success', 'message' : 'Completed!' });
3. Create an 'Error' toast notification.
$.dreamAlert({ 'type' : 'error', 'message' : 'Error!' });
4. Create a 'Loading' toast notification which can be used as a loading spinner for ajax request.
$.dreamAlert({ 'type' : 'loading', 'message' : 'Loading...' });
5. By default, the plugin will display your toast messages in the middle of the screen. You can change the position, icon, and duration with the following parameters.
$.dreamAlert({ 'base_path' : 'source/', 'type' : 'success', 'message' : 'Operation completed', 'summary' : '', 'icon' : '', 'position' : 'center', // or right 'message_id': 1, 'duration' : 3000, 'id' : 0 });
6. Close the toast message immediately.
$.dreamAlert.close();
This awesome jQuery plugin is developed by dreamcog. For more Advanced Usages, please check the demo page or visit the official website.