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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php curl的深入解析
2013/06/02 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP7新增函数
2021/03/09 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
Vue实现验证码功能
2019/12/03 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python 反向输出字符串的方法
2018/07/16 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
电子商务应届生求职信
2013/11/16 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
使用 Apache 反向代理的设置技巧
2022/01/18 Servers