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

avatar 2018年09月09日10:02:06 6 7717 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("你有新消息了!");
  4.     //成功消息提示,默认背景为浅绿色 
  5.     toastr.success("你有新消息了!");
  6.     //成功消息提示,默认背景为浅绿色 
  7.     toastr.success("你有新消息了!");
  8.     //错误消息提示,默认背景为浅红色 
  9.     toastr.error("你有新消息了!");
  10. </script>





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







  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

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

发表评论

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

  

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