寫在前面：
這是一篇菜鳥的學(xué)習(xí)筆記，記錄效果實(shí)現(xiàn)過(guò)程，沒有考慮安全、兼容、性等問(wèn)題。供新手參考，也希望前輩們指點(diǎn)。
效果描述：
這是一個(gè)Material Design風(fēng)格的Toast效果實(shí)現(xiàn)。我希望能夠?qū)⒃撔Ч麑懗赏ㄓ眯涂丶院蠓奖阕约簭?fù)制粘貼。效果動(dòng)畫如下：
video.gif
代碼要點(diǎn)：
- var定義一個(gè)新的div，里面在加個(gè)p標(biāo)簽并設(shè)置css樣式：
var toastdiv = "<div id='comToastBox'"
+"class='toast-class'>"
+"<p style='color: #ffffff ;font-family: 微軟雅黑;padding: 0 40px 0 40px'>"+hint+"</p>"+"</div>";
- jquery動(dòng)態(tài)增加標(biāo)簽元素：
$(document.body).append(toastdiv);
- jquery動(dòng)畫：
$("#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("發(fā)送成功");
});
});
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分離開來(lái)
提取css、js代碼：
- 創(chuàng)建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;
}
- 創(chuàng)建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('這是一個(gè)Toast！')">顯示Toast</button>
</body>
</html>
更新
本次更新修復(fù)原來(lái)連續(xù)點(diǎn)擊重疊問(wèn)題
修改后界面效果如下：
demo.gif
修改js代碼解決連續(xù)點(diǎn)擊bug，代碼如下：
var queue = new Array();//使用一個(gè)隊(duì)列來(lái)存放toast信息
var flag = false;//為了使doLoop同一時(shí)間段只一個(gè)實(shí)例工作
function showToast(hint){
queue.unshift(hint);//信息入隊(duì)列
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
本次更新使用了類以及單例模式重構(gòu)代碼，更新內(nèi)容如下
只附上js文件更新部分，其他可移步Toast示例代碼
/*Toast控件類，使用了單例模式*/
function ToastClass(){
if(ToastClass.instance !== undefined){
return ToastClass.instance;
}
ToastClass.instance = this;
this.toastQueue = new Array();//使用一個(gè)隊(duì)列來(lái)存放toast信息
this.toastFlag = false;//為了使doLoop同一時(shí)間段只一個(gè)實(shí)例工作
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控件類對(duì)html的接口*/
function mmdShowToast(hint){
toast = new ToastClass();
toast.showToast(hint);
}
