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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jquery自适应布局的简单实例
May 28 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php学习笔记之面向对象
2014/11/08 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
微信小程序canvas分享海报功能
2019/10/31 Javascript
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Django框架视图函数设计示例
2019/07/29 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
毕业生优秀推荐信
2013/11/26 职场文书
爱之链教学反思
2014/04/30 职场文书
骨干教师考核方案
2014/05/09 职场文书
化学专业自荐信
2014/05/28 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2016年少先队活动总结
2016/04/06 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
阿里云日志过滤器配置日志服务
2022/04/09 Servers