在线演示 本地下载
前面我们介绍过一款基于jQuery，backbone.js和underscore.js的消息提示框架，今天我们介绍另外一款jQuery的消息提示插件 - Noty。使用它能够帮助我们快速创建，警告，提示和错误信息框。大家肯定都使用过缺省的alert（‘..’）代码吧，使用Nody能够创建出漂亮功能更强大的消息提示，希望大家喜欢！
主要特性
1.内建了alert，warning和error，success，information和confirm对话框
2.支持主题开发
3.完全可定制
4.允许动画定制
5.支持不同的callback方法（onShow，afterShow，onClose，afterClose）等
如何使用
使用非常简答，你导入对应类库，如下：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- noty -->
<script type="text/javascript" src="js/jquery.noty.js"></script>
<!-- layouts -->
<script type="text/javascript" src="js/layouts/bottom.js"></script>
<script type="text/javascript" src="js/layouts/bottomCenter.js"></script>
<script type="text/javascript" src="js/layouts/bottomLeft.js"></script>
<script type="text/javascript" src="js/layouts/bottomRight.js"></script>
<script type="text/javascript" src="js/layouts/center.js"></script>
<script type="text/javascript" src="js/layouts/centerLeft.js"></script>
<script type="text/javascript" src="js/layouts/centerRight.js"></script>
<script type="text/javascript" src="js/layouts/inline.js"></script>
<script type="text/javascript" src="js/layouts/top.js"></script>
<script type="text/javascript" src="js/layouts/topCenter.js"></script>
<script type="text/javascript" src="js/layouts/topLeft.js"></script>
<script type="text/javascript" src="js/layouts/topRight.js"></script>
<!-- themes -->
<script type="text/javascript" src="js/themes/default.js"></script>
注意以上包含了，noty类库，布局代码和主题代码，你可以根据自己的不同需求来引用。有效的缩小了js代码大小。
调用noty非常简单，直接使用如下代码即可：
var n = noty({
text: 'Do you want to continue?',
type: 'alert',
dismissQueue: true,
layout: 'center',
theme: 'default',
buttons: [
{addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
$noty.close();
noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
}
},
{addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
$noty.close();
noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
}
}
]
});
以上我们创建了一个确认框代码，当页面加载后，自动生成一个确认框。位置在页面中间，这里通过layout选项控制。
来源：一个超棒的消息提示jQuery插件 - Noty
