Jquery消息提示插件toastr使用详解

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

这是我目前最喜欢的一个消息提示插件,很多网站和公司也在使用它, 下面介绍它的使用,相信你会喜欢它。

1、下载 toastr

官方地址:https://codeseven.github.io/toastr/

点击右侧的下载 Zip 包,解压后,里面有很多文件,我们拷贝其中的  toastr.min.css 和 toastr.min.js 到项目中

 

2、在 HTML 页面引入 css 和 js

我们需要引入 toastr.min.css 和 toastr.min.js,还有必不可少的 jquery 库

  1. <link rel="stylesheet" href="/components/toastr/css/toastr.min.css">

 

  1. <script src="/js/jquery.min.js"></script>
  2. <script src="/components/toastr/js/toastr.min.js"></script>

 

3、然后在引用 toastr.min.js 的下面写 js 代码

  1. <script>
  2.     //常规消息提示,默认背景为浅蓝色  
  3.     toastr.info("你有新消息了!");
  4.     //成功消息提示,默认背景为浅绿色 
  5.     toastr.success("你有新消息了!");
  6.     //成功消息提示,默认背景为浅绿色 
  7.     toastr.success("你有新消息了!");
  8.     //错误消息提示,默认背景为浅红色 
  9.     toastr.error("你有新消息了!");
  10. </script>

 

 

效果如下,默认是显示在右上角,几秒后自动消失

Jquery消息提示插件toastr使用详解

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: