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>
    效果如下,默认是显示在右上角,几秒后自动消失    

发表评论

目前评论:1