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'

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

1. toast-top-right
2. toast-botton-right
3. toash-bottom-left
4. toast-top-left
5. toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
6. toast-bottom-full-width
7. toast-top-center顶端中间
8. 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种选择

1. success 成功，绿色
2. info 信息，蓝色
3. warning，警告，橙色
4. error，错误，深红色

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