写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。
效果描述：
这是一个Material Design风格的Toast效果实现。我希望能够将该效果写成通用型控件，以后方便自己复制粘贴。效果动画如下：
video.gif
代码要点：
- var定义一个新的div，里面在加个p标签并设置css样式：
var toastdiv = "<div id='comToastBox'"
+"class='toast-class'>"
+"<p style='color: #ffffff ;font-family: 微软雅黑;padding: 0 40px 0 40px'>"+hint+"</p>"+"</div>";
- jquery动态增加标签元素：
$(document.body).append(toastdiv);
- jquery动画：
$("#comToastBox").animate({top:'10%', opacity:'1.0'},300)
.delay(2000)
.animate({top:'5%',opacity:'0.5'},300,function(){$("#comToastBox").remove();});
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB2312">
<title>Title</title>
<style type="text/css">
.toast-class{
border-radius: 2px;
border: 1px solid #323232;
background-color:#323232;
z-index:999;
opacity: 0.5;
position:fixed;
top:15%;
right:10%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function() {
showToast("发送成功");
});
});
function showToast(hint){
var toastdiv = "<div id='comToastBox'"
+"class='toast-class'>"
+"<p style='color: #ffffff ;font-family: 微软雅黑;padding: 0 40px 0 40px'>"+hint+"</p>"+"</div>";
$(document.body).append(toastdiv);
$("#comToastBox").animate({top:'10%', opacity:'1.0'},300)
.delay(2000)
.animate({top:'5%',opacity:'0.5'},300,function(){$("#comToastBox").remove();});
}
</script>
</head>
<body>
<button id="send">显示Toast</button>
</body>
</html>
更新
本次更新主要将之前代码的html、css、js分离开来
提取css、js代码：
- 创建toast.css文件，输入如下代码：
.toast-div{
border-radius: 2px;
border: 1px solid #323232;
background-color:#323232;
z-index:999;
opacity: 0.5;
position:fixed;
top:15%;
right:10%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.toast-p{
color: #ffffff ;
font-family: 微软雅黑;
padding: 0 40px 0 40px;
}
- 创建toast.js文件，输入如下代码：
function showToast(hint){
var toastdiv = "<div id='comToastBox'"
+"class='toast-div'>"
+"<p class='toast-p'>"+hint+"</p>"+"</div>";
$(document.body).append(toastdiv);
$("#comToastBox").animate({top:'10%', opacity:'1.0'},300)
.delay(2000)
.animate({top:'5%',opacity:'0.5'},300,function(){$("#comToastBox").remove();});
}
- html代码改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB2312">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="toast.css"><link>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="toast.js"></script>
</head>
<body>
<button id="send" onclick="showToast('这是一个Toast！')">显示Toast</button>
</body>
</html>
更新
本次更新修复原来连续点击重叠问题
修改后界面效果如下：
demo.gif
修改js代码解决连续点击bug，代码如下：
var queue = new Array();//使用一个队列来存放toast信息
var flag = false;//为了使doLoop同一时间段只一个实例工作
function showToast(hint){
queue.unshift(hint);//信息入队列
doLoop();
}
function doLoop(){
if(flag == false){
flag = true;
if(queue.length != 0){
var toastdiv = "<div id='comToastBox'"
+"class='toast-div'>"
+"<p class='toast-p'>"+queue.pop()+"</p>"+"</div>";
$(document.body).append(toastdiv);
$("#comToastBox").animate({top:'10%', opacity:'1.0'},300)
.delay(2000)
.animate({top:'5%',opacity:'0.5'},300,function(){$("#comToastBox").remove();flag = false;doLoop();});
}
else{
flag = false;
}
}
}
更新，2016.10.6
本次更新使用了类以及单例模式重构代码，更新内容如下
只附上js文件更新部分，其他可移步Toast示例代码
/*Toast控件类，使用了单例模式*/
function ToastClass(){
if(ToastClass.instance !== undefined){
return ToastClass.instance;
}
ToastClass.instance = this;
this.toastQueue = new Array();//使用一个队列来存放toast信息
this.toastFlag = false;//为了使doLoop同一时间段只一个实例工作
this.showToast = function(hint){
this.toastQueue.unshift(hint);
doLoop(this);
}
var doLoop = function(_this){
if(_this.toastFlag == false){
_this.toastFlag = true;
if(_this.toastQueue.length != 0){
var toastdiv = "<div id='mmdToastDiv'"
+"class='mmd-toast-div'>"
+"<p class='mmd-toast-p'>"+_this.toastQueue.pop()+"</p>"+"</div>";
$(document.body).append(toastdiv);
$("#mmdToastDiv").animate({top:'10%', opacity:'1.0'},300)
.delay(2000)
.animate({top:'5%',opacity:'0.5'},300,function(){$("#mmdToastDiv").remove();_this.toastFlag = false; doLoop(_this);});
}
else{
_this.toastFlag = false;
}
}
}
}
/*Toast控件类对html的接口*/
function mmdShowToast(hint){
toast = new ToastClass();
toast.showToast(hint);
}
网友评论