noty – jQuery通知插件

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 下载最新源码,然后引入相应脚本文件:

1 <!--jQuery文件-->
2 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3 <!--noty主文件-->
4 <script type="text/javascript" src="js/noty/jquery.noty.js"></script>
5 <!--noty提示信息位置的文件, 需要哪些位置就引入对应的脚本,这里为center,可以添加多个布局文件-->
6 <script type="text/javascript" src="js/noty/layouts/center.js"></script>
7 <!--noty主题样式文件,-->
8 <script type="text/javascript" src="js/noty/themes/default.js"></script>

如果你使用的是jQuery 1.6以下版本, 那么还需要引入promise.js文件。

使用方法

一般情况下,直接使用noty(options)全局函数来创建提示信息即可:

1 noty({text: "noty - jQuery 通知插件 - 红尘书生 -http://www.cnblogs.com/jesu/", layout: "center", timeout: 5000})

以上代码将创建一个在屏幕中间显示的提示信息,并在5秒后自动关闭。

注意:如果没有对应布局的js文件将不会被正常呈现。

默认选项

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

 1 $.noty.defaults = {
 2     layout: ‘top‘,  // 默认布局
 3     theme: ‘defaultTheme‘, // 默认主题
 4     type: ‘alert‘, // 默认类型
 5     text: ‘‘, //默认文本
 6     dismissQueue: true, // 是否添加到队列
 7     template: ‘<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>‘,  // 消息默认模板
 8     animation: { //默认的显示及关闭动画
 9         open: {height: ‘toggle‘},
10         close: {height: ‘toggle‘},
11         easing: ‘swing‘,
12         speed: 500 // opening & closing animation speed
13     },
14     timeout: false, // 自动关闭时间,默认不会自动关闭
15     force: false, // 添加到队列开始处
16     modal: false, // 遮罩
17     maxVisible: 5, // 一个队列的消息最大可见数量, 即一个队列中同一时间最多显示的数量
18     closeWith: [‘click‘], // [‘click‘, ‘button‘, ‘hover‘] 关闭的事件,默认点击消息关闭
19     callback: { // 回调函数
20         onShow: function() {}, // 显示之前
21         afterShow: function() {}, // 显示之后
22         onClose: function() {}, // 关闭之前
23         afterClose: function() {} // 关闭之后
24     },
25     buttons: false // 按钮,用于在弹出的消息框中显示按钮
26 };

自定义容器

通过noty(options)函数创建的提示信息默认被添加到body上, noty支持在自定义容器中显示提示的方式:

1 $(‘.custom_container‘).noty({text: "noty - jQuery 通知插件 - 红尘书生- http://www.cnblogs.com/jesu/"});

按钮及确认对话框

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

 1 noty({
 2   text: ‘你要继续吗?‘,
 3   buttons: [
 4     {addClass: ‘btn btn-primary‘, text: ‘确定‘, onClick: function($noty) {
 5         // this = button element 也就是当前的按钮
 6         // $noty = $noty element 也就是当前这个提示信息对象
 7         $noty.close();
 8         noty({text: ‘你点击了确定按钮‘, type: ‘success‘});
 9       }
10     },
11     {addClass: ‘btn btn-danger‘, text: ‘取消‘, onClick: function($noty) {
12         $noty.close();
13         noty({text: ‘你点击了取消按钮‘, type: ‘error‘});
14       }
15     }
16   ]
17 });

官方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提示信息的类型

一般情况下通过实例变量来访问它的属性/方法:

1 var n = noty({text: "noty - jQuery 通知插件 - 红尘书生 - http://www.cnblogs.com/jesu/"});
2 n.setText("囧月 - lwme.cnblogs.com"); // 更新内容
3 n.setTimeout(10000); // 设置超时时间
4 n.setType("error"); // 更新提示类型
5 n.close();
6 // 此外, noty还有几个属性用于查看它的状态
7 n.closed // 是否已关闭
8 n.showing // 是否正在显示
9 n.shown // 是否已显示

而$.noty空间最常用的就是clearQueue()和closeAll()方法了,其他几个方法一般不被使用,主要是因为noty的id是随机生成的。

除了文档里公开的,noty还有一些没在文档里公开的属性:

  • $.noty.queue 消息队列, Array
  • $.noty.layouts 可以获取当前加载的布局, Object
  • $.noty.themes 获取可用的主题, Object
  • $.noty.store 获取当前显示在页面中的noty对象,然后可以通过api进行操作, Array
  • $.noty.returns 获取noty(options)函数返回的值, 默认为object返回noty对象,可以改成其他值返回noty对象的id

此外,noty还提供了方法用来替代window.alert函数:

  • $.noty.consumeAlert 替代window.alert
  • $.noty.stopConsumeAlert 取消替代

noty整体设置比较简单,没有过多的参数设置,使用起来也很方便,特别是默认不用按钮来让用户点确定这点特别值得称赞,体验相当不错。

更多的例子请看官方:http://needim.github.io/noty/

END>>>

时间: 2024-10-16 13:49:24

noty – jQuery通知插件的相关文章

jQuery通知插件 -- noty

noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可以获取最新源代码. 布局样式 支持的提示样式,每种样式都有预定义好的css样式: alert: 默认的提示样式 success: 成功 error: 错误 warning: 警告 information: 信息 支持的布局位置: top: 顶部,长条状 topLeft/topCenter/topRi

js插件----&gt;jquery通知插件toastr的使用

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的支持.今天我们就开始toastr的学习. jquery通知插件toastr的使用 一.引入jquery库和toastr的核心文件: toastr的下载地址: http://codeseven.github.io/toastr/. jquery的下载地址:http://jquery.com/downl

漂亮灵活设置的jquery通知提示插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用.jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip. 使用方法: 引入核心文件 1 2 3 <link href="toastr.css" rel="stylesheet" type="

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida