toastr.js通知插件

toastr.js是一款通知插件,在H+前端页面里也有示例。

前端使用时候可以绑定事件使用。使用语法包含四种类型。

toastr.success,toastr.info,toastr.error,toastr.warning,

使用例子

toastr.success(Message,title);

toastr.success(Message);

if(typeof(toastr)=="object"){
    toastr.options = {
        closeButton: true, //显示关闭按钮
        debug: false,  //debug模式
        progressBar: true, //进度条
        positionClass: "toast-top-right", //显示位置
        showDuration: "400",
        hideDuration: "1000",
        timeOut: "7000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut",
        onclick:function (obj) {
        }
    }

    toastr.options.onShown = function() {

    };
    toastr.options.onHidden = function() { };
    toastr.options.onclick = function(event) {
        console.log('clicked');
        console.log(event.currentTarget.classList[1]=="toast-info");
    };
    toastr.options.onCloseClick = function() {};

}

//成功提示绑定

toastr.success("祝贺你成功了");

       
//信息提示绑定

toastr.info("这是一个提示信息");

  
//敬告提示绑定

toastr.warning("警告你别来烦我了");

      
//错语提示绑定

$("#error").click(function(){

toastr.error("出现错误,请更改");

})


//清除窗口绑定

toastr.clear();




显示位置包括

"toast-top-right"右上
"toast-bottom-right"右下
"toast-bottom-left"左下
"toast-top-left"左上
"toast-top-full-width"顶部全宽
"toast-bottom-full-width"底部全宽
"toast-top-center"顶部居中
"toast-bottom-center"底部居中
Last modification:January 11, 2020
如果觉得我的文章对你有用,请随意赞赏