🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

JNotify is a simple and flexible jQuery notification plugin that displays full configurable toast messages on your web page or web app.

Notification toast-message

Documentation

JNotify

基于Jquery的消息提示插件

参数

 var defaults = {        // 容器 notifyContainer       'className':'JNotify-danger', //容器 notifyContainer附加类名       'theme':'error',  // 主题 “success”、“error”、“warning”、“info”       'backgroundColor':'#D9EDF7', //容器背景颜色       'borderColor':'#BCE8F1', //容器边框颜色       'borderRadius':'3px',   //容器边框圆角       'position':'center', //容器对齐方式  left center right       'maxWidth':'250px', //容器最大宽度       'top':8,  //容器top       'zIndex': 888,       'height':null,  //容器固定高度         //信息外层 notifyWarpper       'padding':'15px', //信息内容外部Wrapper内边距        //信息内容 notifyMessage       'message':'尊敬的用户您的手机已欠费,请即时续缴话费', //显示的信息内容       'fontSize':'14px',  //信息内容字体大小       'fontColor': '#31708F', //信息内容字体颜色        //关闭按钮 closeButton       'autoClose':false,  //是否自动关闭       'showCloseButton':true,  //是否显示关闭按钮       'showDuration':5000,  //显示时长  设置自动关闭时才有效       'closeDuration':1000  //关闭延时  设置自动关闭时才有效    };  ...

使用

环境要求:Jquery >= 1.6

  1. bower install jquery-jnotify 或 下载源码jquery.jnotify.js

2.在页面上引入 jquery 和 jquery-jnotify两个js文件

3.调用如下

 $(function(){       // 一行代码即可      var jNotify = $.JNotify();       或者参数自定义       var jNotify = $.JNotify({           'message':'文字内容', //显示的信息内容           'fontSize':'14px',  //信息内容字体大小           'fontColor': '#31708F', //信息内容字体颜色           'autoClose':true,  //是否自动关闭           'showCloseButton':true,  //是否显示关闭按钮      });       //另外       //隐藏关闭按钮      jNotify.showCloseButton(false);       //设置对齐方式 left,center,right      jNotify.setPosition('left');       //关闭容器      jNotify.close(jNotify.notifyContainer);       //设置主题 success,error,warning,info      jNotify.setTheme('success');       //改变主题颜色 (borderColor,backgroundColor,fontColor)      jNotify.setThemeColor('#BCE8F1','#D9EDF7','#31708F');       //设置圆角关闭按钮      jNotify.setCloseButtonRadius();       //设置关闭按钮offset top      jNotify.setCloseButtonTop(10);       //设置宽度      jNotify.setWidth('100%');       //设置高度      jNotify.setHeight(130);      }); ...

License

MIT


You May Also Like