jquery通知插件toastr

最新推荐文章于 2020-09-04 14:02:05 发布

洋葱花瓣

最新推荐文章于 2020-09-04 14:02:05 发布

阅读量1.1k

点赞数 1

分类专栏： html 文章标签： jquery 插件 toastr

本文链接：https://blog.csdn.net/u012151597/article/details/70314689

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

toastr是非阻塞通知的JavaScript库。jQuery是必需的。我们的目标是创建一个简单的核心库，可以自定义和扩展。

使用方法：
1.引入jquery.js
2、引入toastr.js,toastr.csss
toastr.js下载地址
 toastr.css下载地址
引入以上文件后，即可使用toastr插件

代码如下：
效果查看

<!DOCTYPE HTML >
<html>
  <head>

    <script src="/toastr/jquery-1.9.1.min.js"></script>
    <link href="/toastr/toastr.css" rel="stylesheet"/>
    <script src="/toastr/toastr.js"></script>

    <script type="text/javascript">
    $(function() {

        //设置显示配置
        var messageOpts = {
            "closeButton" : true,//是否显示关闭按钮
            "progressBar": true,
            "debug" : false,//是否使用debug模式
            //弹出窗的位置 【  右上角 ：toast-top-right，右下角：toast-bottom-right，左下角：toast-bottom-left，左上角：toast-top-left,
            //顶部全屏：toast-top-full-width，底部全屏：toast-bottom-full-width
            "positionClass" : "toast-bottom-right",
            "onclick" : null,
            "showDuration" : "300",//显示的动画时间
            "hideDuration" : "1000",//消失的动画时间
            "timeOut" : "1000",//展现时间
            "extendedTimeOut" : "1000",//加长展示时间
            "showEasing" : "swing",//显示时的动画缓冲方式
            "hideEasing" : "linear",//消失时的动画缓冲方式
            "showMethod" : "fadeIn",//显示时的动画方式
            "hideMethod" : "fadeOut" //消失时的动画方式
        };
        toastr.options = messageOpts;

        $('#showtoast').click(function() {

            //提示
            //调用方法1
            toastr.info('内容1');

            //显示消息框
            toastr.info('内容2', '标题2');

            //调用方法3
            toastr['info']('内容3', '标题3');

            //调用方法4
            toastr.info('内容4', '标题4',messageOpts);

        });

        //成功消息框
        $('#showtoastsuccess').click(function() {
            toastr.success('内容4', '标题4',messageOpts);
        });

        $('#showtoasterror').click(function() {

            //错误
            toastr.error('内容error', '标题error');
            //警告
            toastr.warning('内容warning', '标题warning');
        });

        $('#showtoastwarning').click(function() {

            //警告
            toastr.warning('内容warning', '标题warning');
        });

        $('#cleartoasts').click(function() {

            //清除
            toastr.clear();
        });

        $('#removetoasts').click(function() {

            //移除
            toastr.remove();
        });
    });

    </script>
  </head>
  <!-- 不同的级别，具有不同颜色的框 -->
    <button id="showtoast">显示提示框</button>
    <br>
    <button id="showtoastsuccess">显示成功</button>
    <br>
    <button id="showtoasterror">（错误）</button>
    <br>
    <button id="showtoastwarning">（警告）</button>
    <br>
    <button id="cleartoasts">（清除）</button>
    <br>
    <button id="removetoasts">（移除）</button>
    <br>
  <body>

  </body>
</html>