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

avatar 2018年09月09日10:02:06 6 7015 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
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

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

  

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