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