How to Integrate Jquery toastr plugin
In this post, I would like to show how to integrate jquery toastr plugin within your web page. Toastr is a jquery plugin. By using toastr notification you are able to show messages with several notification like Success,Error,Info and Warning.
The main features of jquery toastr are:-
- It can be placed anywhere into your web page.
- Four built in toastr messages types which is Success,Warning,Info and error.
In this tutorial i am using CDN link of jquery toastr. You can also download library and include it. Please find below the sample of code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Toastr Notification Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>JQuery Toastr Notification Example(click any button)</h3>
<input type="button" value="Success" id="success" style="background-color: #70f160; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Error" id="error" style="background-color: #af5959; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Info" id="info" style="background-color: #5eb5ad; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Warning" id="warning" style="background-color: #f7e652; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<script>
$(function () {
$('#error').click(function () {
toastr.error("Error Message", "Title", { /* title is optional*/
timeOut: 1000,
extendedTImeout: 0,
showMethod: 'fadeIn', /*fadeIn, slideDown and show*/
showDuration: 300, /* in milisecond */
showEasing: 'swing', /*swing, linear*/
hideMethod: 'fadeOut', /* hide, fadout, slideUp */
hideDuration: 1000,
hideEasing: 'swing',/*swing, lineary*/
closeEasing: false,
progressBar: false,
positionClass: 'toast-top-right',
titleClass: 'toast-title',
})
});
$('#info').click(function () {
toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning Message", "Title");
});
$('#success').click(function () {
toastr.success("Successs Message", "Title");
});
});
</script>
</body>
</html>
After running above code you will see the interface as showing below.
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – let us know. We’d love to help!