js消息提示框插件-----toastr用法

Posted 2020-10-16 明天OoO你好

 （本文系转载）

因为个人项目中有一个提交表单成功弹出框的需求，从网上找了一些资料，发现toastr这个插件的样式还是不错的。所以也给大家推荐下，但是网上的使用资料不是很详细，所以整理了一下，希望能给大家带来帮助。

toastr

官网http://codeseven.github.io/toastr/

这个样式插件支持直接导cdn入链接，但是我尝试了一下cdn加载速度太慢，所以推荐直接下载文件后导入文件

个人演示地址，因为把js放在了头部所以加载时间可能有点长，而且我发现自己的服务器不是很稳定，所以多多包涵。

http://47.94.153.112/

整个过程共分为４ 步

1.导入文件

2.页面中头部导入插件

3.配置样式

4.编写触发方式

1.导入文件，这是我测试的文件

2.页面头部导入插件，必须导入jQuery，因为toastr是依赖于jQuery的

3.配置样式，默认样式就已经不错，主要配置弹出位置positionClass这一项，主要有top,bottom以及修饰它们的right，left，center这几个关键词。

<scripttype="text/javascript">

$(function(){

toastr.options= {

"closeButton":false,//显示关闭按钮

"debug":false,//启用debug

"positionClass":"toast-top-center",//弹出的位置

"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("错误样式");

  //带标题的消息框
 toastr.success("你有新消息了!","消息提示");
  
  //另一种调用方法
 toastr["info"]("你有新消息了!","消息提示");

})

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

toastr.clear();//清楚当前页面弹出框

})

});

</script>

4.编写触发方式，因为JS中已经配置了onclick的触发方式，所以直接用button测试了，当然js的触发方式很多，可以按需选择。为了方便查看我这里用bootstrap配置了按钮样式。

<buttonclass="btn btn-success" name="success"id="success"> 成功 </button>

<buttonclass="btn btn-info" name="info"id="info">提示</button>

<buttonclass="btn btn-warning" name="warning"id="warning">警告</button>

<buttonclass="btn btn-danger" name="error"id="error">错误</button>

<buttonclass="btn btn-primary" name="clear"id="clear">清除</button>

5.运行查看效果

一个静态的页面样式就这样配置好了。

如果需要给动态页面添加样式，只需要用JS配置一下接收就好了

function msg() {
var url=location.search;
if(url.indexOf("?") != -1) {
    var str=url.substr(1);
    strs=str.split("=");
    var a=strs[1];
}
if(a==1){
    toastr.success("操作成功");
}
if(a==2){
    toastr.warning("请稍后再试");
}
}

 

这是一个简单通过连接追加的参数显示的示例，当然还有很多除了连接参数的方式，比如JSP中直接获取一个对象值也是可以的。