noty-jQuery通知插件

noty是一个jQuery的通知(信息提示插件),灵活轻便,是一个非常棒的用语替代传统提示对话框的插件.

当前最新版本为2.1.0:从https://github.com/needim/noty.git可以获取源代码

1、’布局样式

a、支持的提示样式，每种样式都有预定义好的css样式

alert：默认的提示样式

success：成功

error：错误

waring：警告

information：信息

b、支持的布局位置：

top：顶部，长条状

topLeft、topCenter、topRight：顶部的左、中、右位置，短条状

center、centerLeft、centerRight：正中、中左、中右，短条状

bottomLeft、bottomCenter、bottomRight：底部左、中、右位置，短条状

bottom：底部，长条状

除以上布局方式之外，还有一种用于自定义布局的inline方式，需要引入layouts/inline.js

3、安装脚本

从https://github.com/needim/noty.git下载源码，然后引入相应脚本文件：

<！--jQuery文件-->

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<！--noty主文件-->

<script type="text/javascript" src="js/noty/jquery.noty.js"></script>

<！--noty提示信息位置的文件，需要哪些位置就引入对应的脚本，这里为center，可以添加多个布局文件-->

<script type="text/javascript" src="js/noty/layout/center.js"></script>

<！--noty主题样式文件-->

<script type="text/javascript" src="js/noty/themes/default.js/"></script>

4、使用方法

一般情况下，直接使用noty（options）全局函数来创建提示信息即可

noty({text:"noty-jquery通知插件", type:"success", layout:"top", timeout:2000});

以上代码将穿件一个在屏幕上方显示的提示信息，并且在2秒后自动关闭

注意：如果没有对应布局的js文件将不会正常显示。

5、默认选项

noty有以下可以供设置的选项：

$.noty.defaults = {

　　layout:'top', //默认布局

　　theme:'defaultTheme', //默认主题

　　type:'alert', //默认类型

　　dismissQueue:true, // 是否添加到队列

　　template:'<div class="noty_message"><span class="noty_text>"</span><div class="noty_close"></div></div>',//消息默认模板

　　animation:{//默认的显示及关闭动画

　　　　open:{height:'toggle'},

　　　　close:{height:'toggle'},

　　　　easing:'swing',

　　　　speed:500 //opening & closing animation speed

　　},

　　timeout:false, // 自动关闭时间，默认不会自动关闭

　　force:false, // 添加到队列开始处

　　model:false, // 遮罩

　　maxVisible:5, // 一个队列的消息最大课件数量，即一个队列中同时最多显示的数量

　　closeWith:['click'], // ['click','button','hover']关闭的事件，默认点击消息关闭

　　callback:{//回调函数

　　　　onShow:function(){},// 显示之前

　　　　afterShow:function(){},//显示之后

　　　　onClose:function(){},//关闭之前

　　　　afterClose:function(){}//关闭之后

　　},

　　buttons:false//按钮，用于在弹出的消息框中显示按钮

};

6、通过noty（options）函数创建的提示信息默认被添加到body上，noty支持在自定义容器中显示提示的方式

$.('.custom_container').noty({text:"通知信息"});

7、按钮及确认对话框

可以像这样设置提示信息上的按钮：

noty({

　　text:'你要继续吗？',

　　buttons:[

　　　　{addClass:'bun btn-primary',text:'点我啊',onClick:function($noty){

　　　　　　//this = button element 也就是当前的按钮

　　　　　　//$noty = $noty element 也就是当前这个提示信息对象

　　　　　　$noty.close();

　　　　　　noty({text:'你点了按钮'，type:'success'});　

　　　　}

　　　　},

　　　　{addClss:'btn btn-danger',text:'就不点',onClick:function($noty){　

　　　　　　$noty.close();

　　　　　　noty({text:'你选择了就不点'，type:'error'});

　　　　}

　　　　}

　　]

});

官方的DEMO中的确认提示对话框也是这么创建的