关于jQuery通知插件toastr的使用

浅浅的花香味﹌ 2023-10-11 15:29 38阅读 0赞

相信大家在使用百度云网盘的时候一定见过以下这种消息提示框，那么那这种消息提示框的效果是如何实现的呢，或者说通过什么插件实现的呢？那答案就是通过 **toastr** 插件使用的，那么本文将对插件的使用提供了一种解决方案。  
![在这里插入图片描述][20210403222821837.png_pic_center]

--------------------

### 插件下载： ###

[下载链接：https://download.csdn.net/download/weixin\_43819566/16399353][https_download.csdn.net_download_weixin_43819566_16399353]

--------------------

### 资源引入： ###

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

--------------------

### 案例演示： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>toastr插件演示</title>
    
        
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    
        
        <link href="toastr/toastr.css" rel="stylesheet" />
        <script src="toastr/toastr.min.js"></script>
        <style>
            .container{
         
                margin-top: 200px
            }
            .container .btn{
         
                font-size: 18px;
            }
        </style>
    </head>
    <body>
    
    <div class="container">
        <div class="col-sm-offset-2 col-sm-2">
            <button class="btn btn-default" id="normal">正常提示框</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-default" id="success">成功提示框</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-default" id="warning">警告提示框</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-default" id="error"> 错误提示框</button>
        </div>
    </div>
    
    </body>
    </html>
    
    <script>
        $(function (){
         
            //提示框初始化参数
            toastr.options = {
         
                closeButton: false, 	// 是否显示关闭按钮，（提示框右上角关闭按钮）
                debug: false,			// 是否使用deBug模式
                progressBar: false, 	// 是否显示进度条，（设置关闭的超时时间进度条）
                positionClass: "toast-top-center",// 设置提示款显示的位置
                onclick: null,			// 点击消息框自定义事件
                showDuration: "300",	// 显示动画的时间
                hideDuration: "1000",	// 消失的动画时间
                // timeOut: "1500",		// 自动关闭超时时间
                extendedTimeOut: "1000",// 加长展示时间
                showEasing: "swing",	// 显示时的动画缓冲方式
                hideEasing: "linear",	// 消失时的动画缓冲方式
                showMethod: "fadeIn",	// 显示时的动画方式
                hideMethod: "fadeOut" 	// 消失时的动画方式
            };
        })
    </script>
    
    <script>
        //成功提示信息
        function success_prompt_alert(content) {
         
            if (content == null) {
         
                content = '';
            }
            var len = content.length;
            if (len <= 10 && len > 0) {
         
                toastr.options.timeOut = "1800";
            } else if (len <= 20) {
         
                toastr.options.timeOut = "2800";
            } else if (len <= 30) {
         
                toastr.options.timeOut = "3800";
            } else if (len > 30) {
         
                toastr.options.timeOut = "4800";
            }
            toastr.success(content);
        }
        //警告提示信息
        function warning_prompt_alert(content) {
         
            if (content == null) {
         
                content = '';
            }
            var len = content.length;
            if (len <= 10 && len > 0) {
         
                toastr.options.timeOut = "1800";
            } else if (len <= 20) {
         
                toastr.options.timeOut = "2800";
            } else if (len <= 30) {
         
                toastr.options.timeOut = "3800";
            } else if (len > 30) {
         
                toastr.options.timeOut = "4800";
            }
            toastr.warning(content);
        }
        //错误提示信息
        function error_prompt_alert(content) {
         
            if (content == null) {
         
                content = '';
            }
            var len = content.length;
            if (len <= 10 && len > 0) {
         
                toastr.options.timeOut = "1800";
            } else if (len <= 20) {
         
                toastr.options.timeOut = "2800";
            } else if (len <= 30) {
         
                toastr.options.timeOut = "3800";
            } else if (len > 30) {
         
                toastr.options.timeOut = "4800";
            }
            toastr.error(content);
        }
        //正常提示信息
        function info_prompt_alert(content) {
         
            if (content == null) {
         
                content = '';
            }
            var len = content.length;
            if (len <= 10 && len > 0) {
         
                toastr.options.timeOut = "1800";
            } else if (len <= 20) {
         
                toastr.options.timeOut = "2800";
            } else if (len <= 30) {
         
                toastr.options.timeOut = "3800";
            } else if (len > 30) {
         
                toastr.options.timeOut = "4800";
            }
            toastr.info(content);
        }
    </script>
    
    <script>
        $(function (){
         
            $('#normal').click(function (){
         
                info_prompt_alert("正常提示")
            })
            $('#success').click(function (){
         
                success_prompt_alert("成功提示")
            })
            $('#warning').click(function (){
         
                warning_prompt_alert("警告提示")
            })
            $('#error').click(function (){
         
                error_prompt_alert("错误提示")
            })
        })
    </script>

效果演示：

![在这里插入图片描述][20210403224137286.gif_pic_center]

--------------------

注意：

引入资源之后，如果项目报错，那么需要检查，是否引入 jquery.js。  
  如果大家对以上的解决方案还有问题，或者还有其他的见解，欢迎在评论区留言哦~

[20210403222821837.png_pic_center]: https://img-blog.csdnimg.cn/20210403222821837.png?#pic_center
[https_download.csdn.net_download_weixin_43819566_16399353]: https://download.csdn.net/download/weixin_43819566/16399353
[20210403224137286.gif_pic_center]: https://img-blog.csdnimg.cn/20210403224137286.gif#pic_center