(本文系转载)
因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的。所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给大家带来帮助。
toastr
官网http://codeseven.github.io/toastr/
这个样式插件支持直接导cdn入链接,但是我尝试了一下cdn加载速度太慢,所以推荐直接下载文件后导入文件
个人演示地址,因为把js放在了头部所以加载时间可能有点长,而且我发现自己的服务器不是很稳定,所以多多包涵。
整个过程共分为4 步
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中直接获取一个对象值也是可以的。