jQuery通知插件 --toastr

最近发现一个收集了各种jQuery插件的网站,网址:http://www.jq22.com/search?seo=toastr

需要这个插件的原因

在用户填写表单时,能更好的通知用户输入相应的操作,更好的交流。


简单介绍下如何使用


下载地址:
http://www.jq22.com/jquery-info476
插件演示的地址:
http://www.jq22.com/yanshi476
在html中加入以下语句就能使用了。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

用法十分简单

  • 信息:toastr.info("内容主体","标题")
  • 警告:toastr.warning("内容主体","标题")
  • 错误:toastr.error("内容主体","标题")
  • 成功:toastr.success("内容主体","标题")

如果想自定义配置的话,需要加入一段js代码。

  <script>
    toastr.options = {
      // 关闭按钮
      "closeButton": true,
      "debug": false,
      //新的通知从上方出现
      "newestOnTop": false,
      "progressBar": false,
      //通知的位置
      "positionClass": "toast-top-right",
      //重复项
      "preventDuplicates": true,
      //能否点击
      "onclick": null,
      //显示的持续时间
      "showDuration": "300",
      //隐藏的持续时间
      "hideDuration": "900",
      "timeOut": "4000",
      "extendedTimeOut": "1000",
      //通知出现的形式
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "slideDown",
      "hideMethod": "slideUp"
    };
  </script>

如果想要更了解的话,可以看看github地址和玩玩demo

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容