MENU

Toastr.js

• May 9, 2019 • Read: 1625 • 经验分享阅读设置

2b6a4ebdeedb744c.jpeg

Toastr

项目介绍
Toastr.js 一款简单的非堵塞消息通知插件。本插件依赖Jquery
演示
https://blog.oioweb.cn/demo/Toastr/

仓库地址
码云:https://gitee.com/wispx/toastr
Github:https://github.com/wisp-x/toastr
使用方法
下载项目,引入jquery和src目录下的css/toastr.css和js/tosatr.js

<link rel="stylesheet" href="css/toastr.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/toastr.min.js"></script>

全局配置

$.toastr.config({
  time: 3000,
  position: 'top-right',
  size: '',
  callback: function () {}
});

配置说明:

配置名 配置说明 可选参数 默认值
time 关闭时间(毫秒) 1000~999999之间的纯数字 3000
position 显示位置 top-left,top-center,top-right,right-bottom,bottom-center,left-bottom top-right
size 大小 lg,sm,xs 空(正常大小)
callback 默认关闭后的回调 function

显示一个成功通知,并设置一个关闭后的回调

$.toastr.success('执行成功', {
    callback: function() {
      console.log('执行回调')
    }
});

在左上角显示一个信息通知

$.toastr.info('有新消息了', {
    position: 'top-left'
});

显示一个警告通知,1秒后关闭

$.toastr.warning('警告,禁止操作!', {
    time: 1000
});

显示一个大小为sm的失败通知

$.toastr.error('执行失败!', {
    size: 'sm'
});

清除所有通知

$.toastr.clear();
Archives QR Code Tip
QR Code for this page
Tipping QR Code