toastr使用

依次引入jquery.js , toastr.js , toastr.css

基本

//toastr.info
//toastr.success
//toastr.error
toastr.info('这是一个消息提示')
//带标题的消息提示
toastr.success('这是一条成功消息的提示', '这是标题')
// 设置消息消失的时间,毫秒
toastr.success('这是一条成功消息的提示', '这是标题',{timeOut:2000})

关闭

//立即移除消息提示,并不带动画效果
toastr.remove()
//立即移除消息提示,带动画效果
toastr.clear()

设置

// 如果想要让html标签正常在消息提示中显示,可以设置这个
toastr.options.escapeHtml = true;
// 给消息框加一个可以主动关闭的 X
toastr.options.closeButton = true;
// 自定义关闭的HTML  与上一个设置连用 可以出现效果
toastr.options.closeHtml = '<button><i class="icon-off">自定义内容</i></button>';
// 点击关闭按钮时的动画设置
toastr.options.closeMethod = 'fadeOut'; 
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
// 新的消息出现的顺序  默认新消息出现在上面  设置之后新消息出现在下面
toastr.options.newestOnTop = false;

回调函数

toastr.options.onShown = function() { console.log('hello'); }  // 消息展示的回调
toastr.options.onHidden = function() { console.log('goodbye'); }//  消息隐藏的回调
toastr.options.onclick = function() { console.log('clicked'); } //  点击消息的回调
toastr.options.onCloseClick = function() { console.log('close button clicked'); }//点击关闭按钮的回调 

动画效果设置

// 渐变效果
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';

// 动画方法
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';

其他设置

// 防止重复  如果消息内容重复 只会显示第一条
toastr.options.preventDuplicates = true;
// 没有用户交互 多久之后消失
toastr.options.timeOut = 1000;
// 当用户鼠标从消息上移开之后多久之后消失
toastr.options.extendedTimeOut = 2000;   
//为了防止消息自动消失 可以将以上两个时间设置为 0 点击后自动消失
toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0; 
// 显示一个进度条 
toastr.options.progressBar = true;
//  让文字从右往左排列 
toastr.options.rtl = true;