[登陆]或[注册]会员 使用QQ号码登陆 微信登陆| 搜藏(Ctrl+D)
  • 微信二维码 添加微信
新闻详细
网站提示jq插件toastr使用详解
时间:2020年03月25日  点击:1380
57.5K

toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。

首先引入JS和css样式表。

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

其次JS引入运行参数

toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-bottom-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut"  
    };  
最后在页面中集中使用提示:

//常规消息提示,默认背景为浅蓝色  
toastr.info("你有新消息了!");  
//成功消息提示,默认背景为浅绿色 
toastr.success("你有新消息了!");  
//警告消息提示,默认背景为橘黄色 
toastr.warning("你有新消息了!");  
//错误消息提示,默认背景为浅红色 
toastr.error("你有新消息了!");  
//带标题的消息框
toastr.success("你有新消息了!","消息提示");  
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");


查看最终效果:

微信截图_20200325092712.jpg




json POST实例:

$("form").submit(function(){
    var self = $(this);
    $.post
(self.attr("action"), self.serialize(), success, "json");
    return false;
    function success(data){
       if(data.status){
toastr.success(data.info,"登录成功了!~");  
    setTimeout(function(){window.location.href = data.url;},3000);
    } else {
toastr.error(data.info,"登录失败了!~");  
    $(".img-responsive").click();
    }
    }
    });


此栏目无信息

如有任何问题可以单击下面的<请联系我>按钮拨打电话,也可以点击【为我留言】参与留言评论,为了网站安全需要微信登录,留言可以是私密留言也可以公开。

请联系我


阅读:1380  
评论0
微信登陆
类似文章

程序框架选用Thinkphp3.2,网站前后台设计为俊杰自行设计,可能存在诸多Bug,如有任何问题请致电我们,我们会及时处理。网维邮箱:328858470@qq.com

©2017 刘俊杰  版权所有    网站备案(ICP):蒙ICP备16004180号-1