一个好看的弹出提示框样式,toastr插件的使用及动态展示分析
来源:互联网 发布:can数据帧格式 波形 编辑:程序博客网 时间:2024/05/02 22:04
因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的。所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给大家带来帮助。
toastr
官网http://codeseven.github.io/toastr/
这个样式插件支持直接导cdn入链接,但是我尝试了一下cdn加载速度太慢,所以推荐直接下载文件后导入文件
个人演示地址,因为把js放在了头部所以加载时间可能有点长,而且我发现自己的服务器不是很稳定,所以多多包涵。
http://m.fzhen.cn/
整个过程共分为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("错误样式");
})
$("#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配置一下接收就好了
functionmsg() {
varurl=location.search;
if(url.indexOf("?") != -1) {
varstr=url.substr(1);
strs=str.split("=");
vara=strs[1];
}
if(a==1){
toastr.success("操作成功");
}
if(a==2){
toastr.warning("请稍后再试");
}
}
这是一个简单通过连接追加的参数显示的示例,当然还有很多除了连接参数的方式,比如JSP中直接获取一个对象值也是可以的。
阅读全文
1 0
- 一个好看的弹出提示框样式,toastr插件的使用及动态展示分析
- jquery toastr提示框的使用
- Toastr消息提示框的使用
- 在项目中使用js的提示插件toastr
- Jquery消息提示插件toastr使用详解
- 一个好看的样式,datagriview
- 3、js插件---->jquery通知插件toastr的使用
- response跳转页面前弹出alert提示框分析及常见的弹出框使用
- 转别人一个样式好看的导航
- css 比较好看的一个table样式
- 一个好看的winfrom datagridview样式
- 封装一个特别好看的进度条样式!
- toastr 插件使用
- Jquery消息提示插件toastr
- 消息提示插件:toastr.js
- 一个有点好看的渐变验证提示框
- 好看的按钮样式
- 好看的文本框样式
- 记录fidder和head,日后复习
- 最长无重复字符的子串
- 浅谈C语言中的位段
- 使用 Device Mapper来改变Docker 容器的大小
- 数据库系统概要
- 一个好看的弹出提示框样式,toastr插件的使用及动态展示分析
- 发布AndroidLibrary到JCenter,一步一步,拒绝踩坑!
- POJ
- FreeRTOS笔记2
- 时光机——svn概念篇
- Form habits----思维方式训练
- docker网络配置方法总结
- 堆中的路径
- getchar()输入不定长数组,getline输入字符串,int和string的相互转换