Sunday, November 22, 2015

Jquery toastmessage plugin - make it easy

Respect the developer here

The toastmessage gives you a best jquery messages integrated with your website. It looks nice and has many features.
Simplified zip file is attached and Click here to download.

How to use?

1. Add references to the files
 <link href="Responsive/js/toastmessage/resources/css/jquery.toastmessage.css"  
     rel="stylesheet" type="text/css" />  
 <script src="Responsive/js/toastmessage/javascript/jquery.toastmessage.js"  
     type="text/javascript"></script>  
 <script src="Responsive/js/toastmessage/javascript/ToastMessage.js"  
     type="text/javascript"></script>  

2. From your code behind, add this line
 - Success;
 ScriptManager.RegisterStartupScript(this, this.GetType(), "showSuccessToast", "showSuccessToast('Successfully Updated');", true);  

- Error
 ScriptManager.RegisterStartupScript(this, this.GetType(), "showErrorToast", "showErrorToast('Update Error');", true);  

Inspect the ToastMessage.js for other message types.
 function showErrorToast(msg) {  
   $().toastmessage('showToast', {  
     text: msg,  
     sticky: false,  
     position: 'middle-center',  
     type: 'error',  
     closeText: '',  
     close: function () {  
       //console.log("toast is closed ...");  
     }  
   });  
 }  
 function showInfoToast(msg) {  
   $().toastmessage('showToast', {  
     text: msg,  
     sticky: false,  
     position: 'middle-center',  
     type: 'notice',  
     closeText: '',  
     close: function () {  
       //console.log("toast is closed ...");  
     }  
   });  
 }  
 function showSuccessToast(msg) {  
   $().toastmessage('showToast', {  
     text: msg,  
     sticky: false,  
     position: 'middle-center',  
     type: 'success',  
     closeText: '',  
     close: function () {  
       //console.log("toast is closed ...");  
     }  
   });  
 }  
 function showWarningToast(msg) {  
   $().toastmessage('showToast', {  
     text: msg,  
     sticky: false,  
     position: 'middle-center',  
     type: 'warning',  
     closeText: '',  
     close: function () {  
       //console.log("toast is closed ...");  
     }  
   });  
 }  

It looks like below;











You can change the "sticky: false," to true if you need the message to be stick until you close it. Otherwise you can make it close automatically after a given duration of milliseconds. 

No comments:

Post a Comment