noty是一个jQuery的通知(信息提示)插件，灵活轻便，是一个非常棒的用于替代传统提示对话框的插件。
当前最新版本为2.1.0: 从 https://github.com/needim/noty 可以获取最新源代码。
布局样式
支持的提示样式，每种样式都有预定义好的css样式：
•alert: 默认的提示样式
•success: 成功
•error: 错误
•warning: 警告
•information: 信息
支持的布局位置：
•top: 顶部,长条状
•topLeft/topCenter/topRight: 顶部的左/中/右位置, 短条状
•center/centerLeft/centerRight: 正中/中左/中右, 短条状
•bottomLeft/bottomCenter/bottomRight: 底部左/中/右位置, 短条状
•bottom: 底部,长条状
除上以上布局方式之外,还有一种用于自定义布局的inline方式,需要引入layouts/inline.js
安装脚本
从https://github.com/needim/noty 下载最新源码,然后引入相应脚本文件:
<!--jQuery文件--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!--noty主文件--> <script type="text/javascript" src="https://www.jb51.net/js/noty/jquery.noty.js"></script> <!--noty提示信息位置的文件, 需要哪些位置就引入对应的脚本,这里为center,可以添加多个布局文件--> <script type="text/javascript" src="https://www.jb51.net/js/noty/layouts/center.js"></script> <!--noty主题样式文件,--> <script type="text/javascript" src="https://www.jb51.net/js/noty/themes/default.js"></script>
如果你使用的是jQuery 1.6以下版本, 那么还需要引入promise.js文件。
使用方法
一般情况下，直接使用noty(options)全局函数来创建提示信息即可:
noty({text: "noty - jQuery 通知插件 - 脚本之家 -", layout: "center", timeout: 5000})以上代码将创建一个在屏幕中间显示的提示信息,并在5秒后自动关闭。
注意:如果没有对应布局的js文件将不会被正常呈现。
默认选项
noty有以下可供设置的选项:
$.noty.defaults = { layout: 'top', // 默认布局 theme: 'defaultTheme', // 默认主题 type: 'alert', // 默认类型 text: '', //默认文本 dismissQueue: true, // 是否添加到队列 template: '<div><span></span><div></div></div>', // 消息默认模板 animation: { //默认的显示及关闭动画 open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 // opening & closing animation speed }, timeout: false, // 自动关闭时间,默认不会自动关闭 force: false, // 添加到队列开始处 modal: false, // 遮罩 maxVisible: 5, // 一个队列的消息最大可见数量, 即一个队列中同一时间最多显示的数量 closeWith: ['click'], // ['click', 'button', 'hover'] 关闭的事件,默认点击消息关闭 callback: { // 回调函数 onShow: function() {}, // 显示之前 afterShow: function() {}, // 显示之后 onClose: function() {}, // 关闭之前 afterClose: function() {} // 关闭之后 }, buttons: false // 按钮,用于在弹出的消息框中显示按钮 };
自定义容器
通过noty(options)函数创建的提示信息默认被添加到body上, noty支持在自定义容器中显示提示的方式:
$('.custom_container').noty({text: "noty - jQuery 通知插件 - 脚本之家- https://www.jb51.net/jesu/"});
按钮及确认对话框
可以像这样设置提示信息上的按钮：
noty({ text: '你要继续吗?', buttons: [ {addClass: 'btn btn-primary', text: '确定', onClick: function($noty) { // this = button element 也就是当前的按钮 // $noty = $noty element 也就是当前这个提示信息对象 $noty.close(); noty({text: '你点击了确定按钮', type: 'success'}); } }, {addClass: 'btn btn-danger', text: '取消', onClick: function($noty) { $noty.close(); noty({text: '你点击了取消按钮', type: 'error'}); } } ] });
官方DEMO中的确认提示对话框也是这么创建的。
API
主要有以下api可用：
•$.noty.get(id): 通过id获取noty对象, 一般用不到
•$.noty.close(id): 关闭一个noty提示
•$.noty.clearQueue(): 清空队列中的noty
•$.noty.closeAll(): 关闭所有noty提示
•$.noty.setText(id, text): 更新noty提示信息的文本内容
•$.noty.setType(id, type): 更新noty提示信息的类型
一般情况下通过实例变量来访问它的属性/方法: