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

avatar 2018年09月09日10:02:06 6 7741 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
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("你有新消息了!");
  5.     //成功消息提示，默认背景为浅绿色 
  6.     toastr.success("你有新消息了!");
  8.     //成功消息提示，默认背景为浅绿色 
  9.     toastr.success("你有新消息了!");
  11.     //错误消息提示，默认背景为浅红色 
  12.     toastr.error("你有新消息了!");
  14. </script>





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







历史上的今天
九月
09日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0