javascript+jQuery：仿Android Toast提示框

Android应用中的Toast主要是用于向用户提示一些信息，其用意与javascript中的alert()方法相同，但是美感却比alert好，在轻应用中仿Android做出toast的效果更有原生App的体验感。

目的：在html页面产生仿Android的toast效果

语言：javascript+jQuery

方法声明：
function toast(message, duration)

参数说明：
string message - toast提示内容
int duration - toast显示持续时间(可选"long", "short"或具体毫秒数，"short"时为2000，"long"为5000，此参数不填时默认"short")

方法体：

var toast_id = 0;        //外部变量，用来保存setTimeout产生的计时器id
var zindex = 99;　　　　　//这里的z-index可以自己调整，保证在其他元素上不被遮挡
function toast(message, duration) {
　　window.clearTimeout(toast_id);    //若短时间内调用两次toast,清除上一次的timeout
　　if (document.getElementById("app_toast")!=undefined) {
    　　//上次toast未消失,此时强制停止动画并删除该元素
　　　　$("#app_toast").stop();
　　　　document.body.removeChild(document.getElementById("app_toast"));
　　}
　　//设置超时时间
　　duration = duration==null?"short":duration;
　　if (duration=="short") duration = 2000;
　　else if (duration=="long") duration = 5000;

　　//定义新元素
　　var div = document.createElement("div");
　　div.setAttribute("style", "position:fixed;top:89%;text-align:center;width:95%;z-index:” + zindex);　　div.setAttribute("id", "app_toast");
　　//写入innerHTML内容，z-index为app_tpast的z-index值加1，value为提示内容
　　div.innerHTML = ‘<input type="button" id="app_txt_toast" style="padding-left:20px;padding-right:20px;border-radius:8px;opacity:0.2;height:20px;background:#000000;color:#ffffff;border:none;z-index:‘+(zindex+1)+‘;" value="‘+message+‘"/>‘;
　　document.body.appendChild(div);　　//向document添加元素

　　$("#app_txt_toast").animate({height:‘29px‘,opacity:‘0.7‘}, 200, function(){});　
　　$("#app_toast").animate({top:‘85%‘}, 200, function(){});　　//制作一个toast从底部滑动效果
　　
　　//持续duration毫秒后fadeout
　　toast_id = window.setTimeout(function() {
　　    $("#app_toast").fadeOut(200, function() {　　　　
　　　　　　    document.body.removeChild(document.getElementById("app_toast"));
        toast_id = 0;
    })
　　}, duration);
}

调用方法：toast("message")或toast("message", 3000)或toast("message", "short")