最近由于项目中使用到了jQuery noty，通过看官方文档之后，可以按时完成任务，但是不够系统。也没有进行整理。今天来整理一下。

介绍

jQuery noty document：

jQuery noty gitHub：https://github.com/needim/noty

根据我的理解，试着翻一下jQuery noty document 中的介绍内容：

安装

安装jQuery：

下载jQuery noty：https://github.com/needim/noty/releases

创建 选项 $.noty.defaults = { layout: 'top', // 显示的位置 theme: 'defaultTheme', // 使用的主题：这个是默认主题，也可以定制 type: 'alert',　　　// 同志消息类型 text: '', // 显示的文字，可以为html dismissQueue: true, // 如果想使用序列，将这个值设置为true template: '<div><span></span><div></div></div>', animation: { // 设置动画效果 open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 // 打开、关闭的速度 }, timeout: false, // 可以设置多少时间超时：数字、true、false force: false, // adds notification to the beginning of queue when set to true（没看懂） modal: false, maxVisible: 5, // 可以设置最多显示多少个通知消息 killer: false, // 在显示这个noty之前，将所有的noty关掉 closeWith: ['click'], // 关闭的方式，默认是click['click', 'button', 'hover'] callback: { // 设置回调函数 onShow: function() {}, afterShow: function() {}, onClose: function() {}, afterClose: function() {} }, buttons: false // 定义一个按钮数组 }; 自定义容器 var n = $('.custom_container').noty({text: 'noty - a jquery notification library!'}); 主题

noty已经内容了noty/themes/default.js文件中，可以自己修改这个文件，然后使用这个主题属性。

按钮

通过添加按钮数组来添加按钮

noty({ text: 'Do you want to continue?', buttons: [ {addClass: 'btn btn-primary', // 确认按钮样式 text: 'Ok', // 确认按钮的文字 onClick: function($noty) { // this = button element // this 就是button element // $noty = $noty element // $noty是 noty element $noty.close(); // 关闭这个noty noty({text: 'You clicked "Ok" button', type: 'success'}); // noty中还可以使用noty } }, {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) { // 第二个button $noty.close(); noty({text: 'You clicked "Cancel" button', type: 'error'}); } } ] }); 回调

目前支持onShow 、 afterShow 、 onClose 、 afterClose这四种回调

API 补充