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

 （本文系转载）

因为个人项目中有一个提交表单成功弹出框的需求，从网上找了一些资料，发现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这几个关键词。

< script type= "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配置了按钮样式。

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

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

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

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

< button class= "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中直接获取一个对象值也是可以的。