欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  jQuery消息提示插件toastr.js使用详解

JQuery 本站 556 0评论

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

demo效果展示以及GitHub地址:https://codeseven.github.io/toastr/demo.html 


使用方法


1、引入jquery库和toastr的核心文件:

toastr的下载地址: http://codeseven.github.io/toastr/

jquery的下载地址:http://jquery.com/download/ 

CDN镜像:https://www.bootcdn.cn/toastr.js/ 


<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之前引入。


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

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


3、给按钮绑定事件

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

    toastr.error("hello world.");

}); 


4、集成使用

//常规消息提示,默认背景为浅蓝色  
toastr.info("你有新消息了!");  

//成功消息提示,默认背景为浅绿色 
toastr.success("你有新消息了!");  

//警告消息提示,默认背景为橘黄色 
toastr.warning("你有新消息了!"); 
 
//错误消息提示,默认背景为浅红色 
toastr.error("你有新消息了!");  

//带标题的消息框
toastr.success("你有新消息了!","消息提示");  

//另一种调用方法
toastr["info"]("你有新消息了!","消息提示")

效果:

20181022150229.png

5、自定义用法

你也可以修改toastr显示的方式和位置(https://codeseven.github.io/toastr/demo.html),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.");
});

各参数说明:

参数名称说明可选项
closeButton是否显示关闭按钮true,false
debug是否使用debug模式true,false
positionClass弹出窗的位置具体见下文
showDuration显示的动画时间
hideDuration消失的动画时间
timeOut展现时间
extendedTimeOut加长展示时间
showEasing显示时的动画缓冲方式swing
hideEasing消失时的动画缓冲方式linear
showMethod显示时的动画方式fadeIn
hideMethod消失时的动画方式fadeOut

positionClass参数补充:

positionClass描述
toast-top-left顶端左边
toast-top-right顶端右边
toast-top-center顶端中间
toast-top-full-width顶端中间(宽度铺满)
toast-bottom-right底部右边
toast-bottom-left底部左边
toast-bottom-center底部中间
toast-bottom-full-width底部中间(宽度铺满)


测试的全部代码:

<!doctype html>
<html>
<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>

显示效果如下:

201810220301.gif


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

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

运行的效果如下:

849920-20161128172451209-806818396.gif

第一个参数为提示内容,第二个参数为提示标题,如果不需要标题,则可省略第二个参数

toastr.info('hello world.');


关闭提示框  

toastr.clear([toast]);


获取当前显示的提示框

toastr.active();


刷新打开的提示框(第二个参数配置超时时间)  

toastr.refreshTimer(toast, 5000);


这里列出可以重写的属性:以下默认的属性都可以作为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://www.cnblogs.com/huhx/p/jsThirdToastr.html

转载请注明: ITTXX.CN--分享互联网 » jQuery消息提示插件toastr.js使用详解

最后更新:2018-10-22 16:08:13

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽