美文网首页
jQuery通知插件 --toastr

jQuery通知插件 --toastr

作者: 你就像只铁甲小宝 | 来源:发表于2019-03-10 22:16 被阅读0次

    最近发现一个收集了各种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

    相关文章

      网友评论

          本文标题:jQuery通知插件 --toastr

          本文链接:https://www.haomeiwen.com/subject/cbappqtx.html