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 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
js生成随机数的过程解析
Nov 24 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue webpack重写cookie路径的方法
Jul 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 session应用实例 登录验证
2009/03/16 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
JS日历 推荐
2006/12/03 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python WSGI的深入理解
2018/08/01 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
上课说话检讨书大全
2014/01/22 职场文书
鉴定评语大全
2014/05/05 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
七个非常实用的Python工具包总结
2021/06/15 Python
Python实现双向链表基本操作
2022/05/25 Python