js插件---- jquery通知插件toastr的使用

　　toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置。toastr需要jquery的支持。今天我们就开始toastr的学习。

一、引入jquery库和toastr的核心文件：

toastr的下载地址： http://codeseven.github.io/toastr/。 jquery的下载地址：http://jquery.com/download/

<link href="toastr.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="toastr.js" ></script>

jquery-2.2.4.min.js要在toastr.js之前引入。

二、写入html代码，这里只需写入触发事件的按钮。

<button id="button1">成功</button>

三、给按钮绑定事件

$('#button2').click(function () {
    toastr.error("hello world.");
});

四、你也可以修改toastr显示的方式和位置，toastr.options是全局的。

$('#button1').click(function () {
    toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: false,  
        positionClass: "toast-top-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "5000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut"  
    };  
    toastr.info("hello world.");
});

测试的全部代码：

<!doctype html>
<html lang="en">
<head>
<link href="toastr.min.css" rel="stylesheet" type="text/css"/>
<title>huhx</title>
</head>
<body>
    <button id="button1">Button1</button>
    <button id="button2">Button2</button>
    <button id="button3">Button3</button>
    <script type="text/javascript" src="jquery-2.2.4.min.js" ></script>
    <script type="text/javascript" src="toastr.js" ></script>
    <script type="text/javascript">
    $('#button1').click(function () {
    toastr.options = {  
            closeButton: false,  
            debug: false,  
            progressBar: false,  
            positionClass: "toast-top-center",  
            onclick: null,  
            showDuration: "300",  
            hideDuration: "1000",  
            timeOut: "5000",  
            extendedTimeOut: "1000",  
            showEasing: "swing",  
            hideEasing: "linear",  
            showMethod: "fadeIn",  
            hideMethod: "fadeOut"  
        };  
        toastr.info("hello world.");
    });

    $('#button2').click(function () {
        toastr.error("hello world.");
    });
    $('#button3').click(function () {
        toastr.clear();
    });
    </script>
</body>
</html>

View Code