Material Design的Toast小控件

写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。

效果描述：

这是一个Material Design风格的Toast效果实现。我希望能够将该效果写成通用型控件，以后方便自己复制粘贴。效果动画如下：

video.gif

Toast链接展示

代码要点：

• var定义一个新的div，里面在加个p标签并设置css样式：

var toastdiv = "
"
                    +"
"+hint+"
"+"
";

• 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();});

完整代码：

    
    
    
    


    


    显示Toast

---

更新
本次更新主要将之前代码的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 = "
"
        +"
"+hint+"
"+"
";

    $(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代码改为：

    
    
    
    
    
    


    显示Toast

---

更新
本次更新修复原来连续点击重叠问题

---

修改后界面效果如下：

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 = "
"
                +"
"+queue.pop()+"
"+"
";
                    $(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 = "
"
                    +"
"+_this.toastQueue.pop()+"
"+"
";
                        $(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);
}

最后附上源代码：

Toast示例代码