toastr jQuery消息通知插件文档

简介

Toastr是一款基于jQuery的通知插件，可以灵活的自定义样式和拓展其功能！

项目Github主页：https://github.com/CodeSeven/toastr



引用

<span style="font-family:Comic Sans MS;"><link href="toastr.css" rel="stylesheet"/>
<script src="jquery.js"></script>
<script src="toastr.js"></script></span>

使用

//显示一个没有标题的信息框（蓝色）
toastr.info("I am yanying");

//显示一个没有标题的警告框（橘黄色）
toastr.warning("I am yanying");

//显示一个没有标题的成功提示（绿色）
toastr.info("I am yanying");

//显示一个没有标题的错误提示（深红色）
toastr.error("I am yanying");

//清除一个错误
toastr.clear()</span>

高级方法

使用这种方法也可以调用通知插件，而且还可以配置一些参数信息，达到不同功能和效果

$(function () {

$('#showtoast').click(function () {

toastr.options = {

closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-right",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};

var $toast = toastr['error']('123', 'title');

});

})

可供选择的设置选项

closeButton: true

是否在通知弹窗上面显示关闭按钮，true：显示；false：不显示

debug: true

是否开起debug

progressBar: false

是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失

positionClass: 'toast-top-right'

位置信息，消息弹窗显示的位置，可以显示的位置对应的值

toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
toast-bottom-full-width
toast-top-center顶端中间
toast-bottom-center

onclick: null

showDuration: "300"

显示动作（从无到有这个动作）持续的时间

hideDuration: "1000"

隐藏动作持续的时间

timeOut: "5000"

间隔的时间

extendedTimeOut: "1000"

showEasing: "swing",

hideEasing: "linear",

showMethod: "fadeIn"

显示的方式，和jquery相同，可以是show()

hideMethod: "fadeOut"

隐藏的方式，和jquery相同，可以是hide()

toastr['error']('I am yanying', 'title');

其中的error为显示的通知的样式类型，有4种选择

success 成功，绿色
info 信息，蓝色
warning，警告，橙色
error，错误，深红色

其中第一个参数为显示的内容，第二个参数为显示的标题，标题可以省略