简单的响应式纯js消息通知插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 简单的响应式纯js消息通知插件
简单的响应式纯js消息通知插件
分享:

    插件介绍

    notyf.js是一款超级简单的响应式纯js消息通知插件。它使用纯javascript来制作,没有任何外部依赖,通过简单的设置,即可生成漂亮的消息通知效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-12
    阅读:
麦子学院
简要教程

notyf.js是一款超级简单的响应式纯js消息通知插件。它使用纯javascript来制作,没有任何外部依赖,通过简单的设置,即可生成漂亮的消息通知效果。

安装

可以通过npm来安装notyf.js消息通知插件。

npm install --save notyf                  
                

使用方法

在页面中引入notyf.min.css和notyf.min.js文件。

<link rel='stylesheet' type='text/css' href='css/notyf.min.css' />                
<script src="path/to/notyf.min.js"></script>
                
初始化插件

notyf.js消息通知插件的使用方法如下:

//创建一个Notyf实例对象
var notyf = new Notyf();

//显示一条警告消息
notyf.alert('You must fill out the form before moving forward');

//显示一条成功消息
notyf.confirm('Your changes have been successfully saved!');             
                

配置参数

notyf.js消息通知插件的可用配置参数如下:

参数 类型 默认值 描述
delay Number 2000 消息通知显示的延迟时间,单位毫秒
alertIcon String 预定义图标 警告消息显示的图标的class类
confirmIcon String 预定义图标 成功消息显示的图标的class类

下面的例子是消息在用户点击按钮后1秒钟显示,并使用FontAwesome字体图标作为警告框和成功消息框的图标。

var notyf = new Notyf({
  delay:1000,
  alertIcon: 'fa fa-exclamation-circle',
  confirmIcon: 'fa fa-check-circle'  
})                  
                

notyf.js消息通知插件的github地址为:https://github.com/caroso1222/notyf

网友评论