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 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
Node 模块原理与用法详解
May 13 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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积分兑换接口实例
2015/02/09 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python的垃圾回收机制详解
2019/08/28 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
文秘人员工作职责
2014/01/31 职场文书
元旦联欢会主持词
2014/03/26 职场文书
学生安全责任书范本
2014/07/24 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
小学班级管理心得体会
2016/01/07 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers