全屏浏览
缩小浏览
回到页首

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

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

显示效果如下：

 

五、toastr.xxx()方法有三个参数，第一个是显示的信息，第二个是标题，第三个是默认属性的重写(当然这个实现是局部的)。例子如下：

toastr.info('hello world.', '标题', {positionClass: 'toast-top-center'})

 运行的效果如下：

这里列出可以重写的属性：以下默认的属性都可以作为toastr.xxx的第三个参数重写。

function getDefaults() {
    return {
        tapToDismiss: true,
        toastClass: 'toast',
        containerId: 'toast-container',
        debug: false,

        showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
        showDuration: 300,
        showEasing: 'swing', //swing and linear are built into jQuery
        onShown: undefined,
        hideMethod: 'fadeOut',
        hideDuration: 1000,
        hideEasing: 'swing',
        onHidden: undefined,
        closeMethod: false,
        closeDuration: false,
        closeEasing: false,
        closeOnHover: true,

        extendedTimeOut: 1000,
        iconClasses: {
            error: 'toast-error',
            info: 'toast-info',
            success: 'toast-success',
            warning: 'toast-warning'
        },
        iconClass: 'toast-info',
        positionClass: 'toast-top-right',
        timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
        titleClass: 'toast-title',
        messageClass: 'toast-message',
        escapeHtml: false,
        target: 'body',
        closeHtml: '<button type="button">&times;</button>',
        closeClass: 'toast-close-button',
        newestOnTop: true,
        preventDuplicates: false,
        progressBar: false,
        progressClass: 'toast-progress',
        rtl: false
    };
}

具体的学习，可以参考： http://codeseven.github.io/toastr/demo.html

 

 友情链接

 

posted @ 2016-06-06 18:50  huhx  阅读(10726)  评论(0)  编辑  收藏  举报