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="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/layouts/center.js"></script>
<!--noty主题样式文件,-->
<script type="text/javascript" src="js/noty/themes/default.js"></script>

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

 

使用方法

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

noty({text: "noty - jQuery 通知插件 - 囧月 - lwme.cnblogs.com", layout: "center", timeout: 5000});

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

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

 

默认选项

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

$.noty.defaults = {
layout: 'top', // 默认布局
theme: 'defaultTheme', // 默认主题
type: 'alert', // 默认类型
text: '', //默认文本
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, // 添加到队列开始处
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 通知插件 - 囧月 - lwme.cnblogs.com"});

 

按钮及确认对话框

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

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

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

var n = noty({text: "noty - jQuery 通知插件 - 囧月 - lwme.cnblogs.com"});
n.setText("囧月 - lwme.cnblogs.com"); // 更新内容
n.setTimeout(10000); // 设置超时时间
n.setType("error"); // 更新提示类型
n.close();
// 此外, noty还有几个属性用于查看它的状态
n.closed // 是否已关闭
n.showing // 是否正在显示
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/

--EOF--

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

  1. jQuery通知插件 -- noty

    noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...

  2. js插件---->jquery通知插件toastr的使用

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的 ...

  3. jQuery通知插件noty

    jQuery 通知查件noty 简单使用 官方:http://ned.im/noty/ 其它查件推荐 NotifIt Demo http://js.itivy.com/jiaoben1852/inde ...

  4. 【JS】jquery通知插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

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

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  6. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  7. 9款风格华丽的jQuery/CSS3插件

    今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...

  8. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  9. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

随机推荐

  1. 转:亿级Web系统的高容错性实践(好博文)

    亿级Web系统的高容错性实践 亿级Web系统的高容错性实践 背景介绍 大概三年前,我在腾讯负责的活动运营系统,因为业务流量规模的数倍增长,系统出现了各种各样的异常,当时,作为开发的我,7*24小时地没 ...

  2. js将json字符串转化成json对象的方法

    js将json字符串转化成json对象的方法: JSON.parse(jsonObject)

  3. Oracle 服务器端执行带参数的procedure

    进入服务器后 su - oracle sqlplus schema/schemapass 连接上以后,输入以下,然后执行 declare vRet number(5) := 8; begin proc ...

  4. oracle,sqlserver同一个表两个字段和成一个列查询 (详询请加qq:2085920154)

    sql 同一张表开两个字段合成一个字段 例如   SQL tab 字段1 字段2 字段3 3 4 莫 合成 tab 字段1 字段2 3-4 莫     SQL SERVER select 字段1 + ...

  5. [Docker]Docker快速上手学习笔记

    0. 学习的一些疑问 如何热更新镜像(images)?(你可以快速启动或者销毁容器.这种时间几乎是实时的) 如何热更新游戏服? 好处在于各个应用之间环境相互独立,即使某一个容器崩溃也不会影响到其它容器 ...

  6. Maven web项目三种运行方式

    http://www.micmiu.com/software/build/maven-web-eclipse-deploy/

  7. bash快捷建

    bash快捷建 ctrl键组合ctrl+a:光标移到行首.ctrl+b:光标左移一个字母ctrl+c:杀死当前进程.ctrl+d:退出当前 Shell.ctrl+e:光标移到行尾.ctrl+h:删除光 ...

  8. (bzoj2330)糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec  Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋 ...

  9. vc中获取磁盘IO统计计数

    想知道进程读写磁盘的情况,可以获取当前进程或指定进程的IO计数. #include <Windows.h> int get_io_bytes(ULONGLONG * read_bytes, ...

  10. 经验总结之Android framework开发

    本人在某做手机ROM的厂商工作近两年,虽然工作年限不长,但是对此类“工种”已有比较初步的认识,写下来供大家参考借鉴. framework的工作相对于其他比较成熟的软件开发类似,分为维护和需求开发. 需 ...