Multi-functional jQuery Alert & Message Plugin - gmsg.js

File Size: 5.96 KB
Views Total: 1344
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Multi-functional jQuery Alert & Message Plugin - gmsg.js

gmsg.js is a simple, small yet multi purpose jQuery plugin which provides various types of alerts and messages (alert boxes, loading spinners, toast notifications) for your web applications.

Basic usage:

1. To get started, you first need to load jQuery library and the jQuery gmas.js plugin's files in the html page as follows.

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

2. Load the Font Awesome 4 for icons.

<link href="font-awesome.min.css" rel="stylesheet">

3. Create normal toast messages / alert boxes:

$.gmsg({"theme" : "success"});
$.gmsg({"theme" : "warning"});
$.gmsg({"theme" : "danger"});

4. Create a simple loading spinner for ajax request.

$.gmsg({ "theme" : "loading"});

5. Create a simple confirm dialog.

$.gmsg({
  "contentHtml" : "Are You Sure",
  "theme" : "confirm"
});

6. All configuration options.

$.gmsg({

  // show title
  "showTitle" : options == null || options.titleText == null || options.titleText == "" ? false : true , 

  // title text
  "titleText" : "Title", 

  // title icon 
  "titleIcon" : "fa-leaf",

  // tex meesage
  "contentHtml" : null,

  // message icon
  "contentIcon" : "fa-info-circle", 

  // delay time
  "delayTime" : 1000 ,

  // themes
  "theme" : "info",

  // confirm callback
  "confirm" : null , 

  // position
  "position" : "center" ,

  // left position
  "left" : null ,

  // top position
  "top"  : null , 

  // displays mask
  "maskLayer" : true
  
});

7. API methods.

// hide
$.hideGmsg()

// show
$.showGmsg();

Change log:

2016-04-23


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