noty ? jQuery通知插件全面解析


Posted in Javascript onMay 18, 2016

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 通知插件 - 三水点靠木 -http://3water.com/jesu/", 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 通知插件 - 三水点靠木- https://3water.com/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提示信息的类型

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

var n = noty({text: "noty - jQuery 通知插件 - 三水点靠木 - https://3water.com/jesu/"});
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整体设置比较简单,没有过多的参数设置,使用起来也很方便,特别是默认不用按钮来让用户点确定这点特别值得称赞,体验相当不错。

以上这篇noty ? jQuery通知插件全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
vue-hook-form使用详解
Apr 07 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 #Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 #Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 #Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
深入理解JQuery中的事件与动画
May 18 #Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
跟随鼠标旋转的文字
2006/11/30 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js表头排序实现方法
2015/01/16 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
UNIX文件类型
2013/08/29 面试题
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
《问银河》教学反思
2014/02/19 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
党员公开承诺书2016
2016/03/24 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js