Jquery消息提示插件toastr使用

toastr是一个基于jQuery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。

相关文件到官网去下载即可

1、引入toastr的js和css文件

1 <link href="/toastr/build/toastr.css" rel="stylesheet">
2 <script src="/toastr/build/toastr.min.js"></script>

2、初始化toastr(此处是自定义)

toastr.options = {  
        closeButton: false,  //是否显示关闭按钮(提示框右上角关闭按钮)
        debug: false,  //是否为调试;
        progressBar: true,  //是否显示进度条(设置关闭的超时时间进度条)
        positionClass: "toast-bottom-center",  //消息框在页面显示的位置
        onclick: null,  //点击消息框自定义事件
        showDuration: "300",  //显示动作时间
        hideDuration: "1000",  //隐藏动作时间
        timeOut: "2000",  //自动关闭超时时间
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  //显示的方式
        hideMethod: "fadeOut"  //隐藏的方式
};
//常规消息提示,默认背景为浅蓝色  
 toastr.info("你有新消息了!");  
//成功消息提示,默认背景为浅绿色 
 toastr.success("你有新消息了!");  
//警告消息提示,默认背景为橘黄色 
 toastr.warning("你有新消息了!");  
//错误消息提示,默认背景为浅红色 
 toastr.error("你有新消息了!");  
//带标题的消息框
 toastr.success("你有新消息了!","消息提示");  
//另一种调用方法
 toastr["info"]("你有新消息了!","消息提示");

 

posted @ 2017-12-18 17:16  向前爬的蜗牛  阅读(628)  评论(0编辑  收藏  举报