jquery toastr弹窗的代码和使用

最新推荐文章于 2023-02-07 08:46:27 发布

weixin_30263277

最新推荐文章于 2023-02-07 08:46:27 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Lxiaojiang/p/6245912.html

本文介绍如何使用Toastr JavaScript插件实现不同类型的提示消息，包括成功、信息、警告和错误等，并提供了完整的HTML及JavaScript代码示例。

<link href="toastr.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="toastr.js"></script>
写入html代码，这里只需写入触发事件的按丑。

<input type="button" name="success" id="success" value="成功"/>
<input type="button" name="info" id="info" value="提示"/>
<input type="button" name="warning" id="warning" value="警告"/>
<input type="button" name="error" id="error" value="错误"/>
<input type="button" name="clear" id="clear" value="清除"/>
给按钮绑定事件

$(function(){
    //参数设置，若用默认值可以省略以下面代
    toastr.options = {
        "closeButton": false, //是否显示关闭按钮
        "debug": false, //是否使用debug模式
        "positionClass": "toast-top-full-width",//弹出窗的位置
        "showDuration": "300",//显示的动画时间
        "hideDuration": "1000",//消失的动画时间
        "timeOut": "5000", //展现时间
        "extendedTimeOut": "1000",//加长展示时间
        "showEasing": "swing",//显示时的动画缓冲方式
        "hideEasing": "linear",//消失时的动画缓冲方式
        "showMethod": "fadeIn",//显示时的动画方式
        "hideMethod": "fadeOut" //消失时的动画方式
        };
 
        //成功提示绑定
        $("#success").click(function(){
        toastr.success("祝贺你成功了");
        })
         
        //信息提示绑定
        $("#info").click(function(){
        toastr.info("这是一个提示信息");
        })
         
        //敬告提示绑定
        $("#warning").click(function(){
        toastr.warning("警告你别来烦我了");
        })
         
        //错语提示绑定
        $("#error").click(function(){
        toastr.error("出现错误，请更改");
        })
         
        //清除窗口绑定
        $("#clear").click(function(){
        toastr.clear();
        })
    })