elementUI Style Feedback Message Plugin With jQuery - message.js

File Size: 35.1 KB
Views Total: 1108
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
elementUI Style Feedback Message Plugin With jQuery - message.js

message.js is an elementUI inspired jQuery notification plugin used to create customizable info/success/error/warning feedback messages for your web applications.

How to use it:

1. Insert jQuery JavaScript library and the jQuery message.js plugin's files into the html document.

<link rel="stylesheet" href="css/jquery.message.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.message.js"></script>

2. Display a default messages on the screen.

$.message('This is a default message');
$.message('<p>HTML Content is supported as well</p>');

3. Set the notification types.

$.message.info('Info message')
// or
$.message({
  type:'info',
  message:'Info message'
});

$.message.success('Success message')
// or
$.message({
  type:'success',
  message:'Success message'
});

$.message.warning('Warning message')
// or
$.message({
    type:'warning',
    message:'Warning message'
});

$.message.error('Error message')
// or
$.message({
    type:'error',
    message:'Error message'
});

4. Show a close button inside the message.

$.message({
  message:'Message here',
  showClose: true
});

5. Auto dismiss the message after 5 seconds.

$.message({
  message:'Message here',
  duration:5000
});

6. Execute a callback function after the message is closed.

$.message.warning({
  message:'Message here',
  onClose:function(self){
    alert(self.msgId);
  }
});

This awesome jQuery plugin is developed by fchengjin. For more Advanced Usages, please check the demo page or visit the official website.