Toastr消息提示框的使用

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

1、使用很简单，首选引入toastr的js、css文件

<script type="text/javascript" src="../lib/toastr/toastr.js"></script>
<link href="../lib/toastr/toastr.css" rel="stylesheet"/>

2、效果

3、集成使用

//常规消息提示，默认背景为浅蓝色
toastr.info("你有新消息了!");  //成功消息提示，默认背景为浅绿色
toastr.success("你有新消息了!");  //警告消息提示，默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示，默认背景为浅红色
toastr.error("你有新消息了!");  //带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");

4、自定义用法
通过设置自定义参数，可达到不同的效果

自定义参数：

参数说明：
closeButton：false，是否显示关闭按钮（提示框右上角关闭按钮）；
debug：false，是否为调试；
progressBar：false，是否显示进度条（设置关闭的超时时间进度条）；
positionClass，消息框在页面显示的位置toast-top-left  顶端左边
toast-top-right    顶端右边
toast-top-center  顶端中间
toast-top-full-width 顶端，宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-widthonclick，点击消息框自定义事件
showDuration: “300”，显示动作时间
hideDuration: “1000”，隐藏动作时间
timeOut: “2000”，自动关闭超时时间
extendedTimeOut: “1000”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式，和jquery相同
hideMethod: “fadeOut” 隐藏的方式，和jquery相同

Toastr消息提示框的使用相关推荐

QGC注释消息提示框
消息提示框:有时显示时覆盖想要看的界面,可注释!
JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
消息提示框-事件冒泡
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=" ...
flutter Toast消息提示框
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 本文章将讲述: 1.在 flutter 跨平台开发中,使用 Dart 实现 Toast 消息提示框效果 2.Overl ...
window.createPopup()用法以及短消息提示框代码
一.在做一个portal项目时,用户要求在门户首页上的待办信息要有明确的提示,且在浏览器最小化的情况下,当有新的待办信息时,也要做提示.用了alert方法.或者用div的方法都很难实现"在浏 ...
html如何设置提示收到消息,从零开始实现一个消息提示框
引言消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争 ...
unity 弹窗提示_【原创】Unity3D 消息提示框
本文永久地址:http://www.omuying.com/article/60.aspx,[文章转载请注明出处!] 消息提示框,大家都并不陌生,他们的主要作用是给予用户提示,用 NGUI 来做消息提 ...
uniapp 消息提示框
uni.showToast(OBJECT) 显示消息提示框. OBJECT参数说明参数类型必填说明平台差异说明 title String 是提示的内容,长度与 icon 取值有关. i ...
使用pyqt弹出消息提示框
使用pyqt弹出消息提示框安装 pyqt 安装遇到问题 `No matching distribution found for PyQt5-Qt5>=5.15.2 (from pyqt5)` ...

Toastr消息提示框的使用

Toastr消息提示框的使用相关推荐

最新文章

热门文章