/**漸進實現點點點等待效果  引用別人的css**/
.ani_dot {
    font-family: simsun;    
}
:root .ani_dot {
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}
@-webkit-keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    -webkit-animation: dot 1s infinite step-start;
}


@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    animation: dot 1s infinite step-start;

}

/**

 * @Memo 模仿android裡面的Toast效果
 * @Date Feb 23,2017
 * 使用方式：
 * 1、在頁面最後引入toast.js檔案，
 * 2、在需要的位置建立物件並且呼叫方法。如：new Toast("載入中...",2000).show();
 */
var Height=document.body.clientHeight;//取得頁面可視區域的高度
var Width=document.body.clientWidth;//取得頁面可視區域的寬度
/**
 * @param message 訊息體  提示的內容 儘量小於10個字
 * @param time 顯示持續時間  預設2000毫秒
 * @return 
 */ 
var Toast = function(message,time){  
    this.message = message || "載入中...";//顯示內容
    this.time = !time?2000:time;//持續時間  
  var reg = /^[0-9]+$/ ;//驗證是否問正整數表示式
    if(!reg.test(this.time)){//如果是非數字
    this.time = 2000;
    }
    //點點點點等待效果製作
    this.message = removeDot(this.message) ;
    this.init();  
}  
var msgEntity;  
Toast.prototype = {  
    //初始化顯示的位置內容等  
    init : function(){  
        $("#toastMessage").remove();  
        //設定訊息體  
        var msgDIV = new Array();  
        msgDIV.push('<div id="toastMessage" style="border-radius:5px;-moz-opacity:0.6;opacity:0.6;">');  
        msgDIV.push('<span id="toastMessageSpan" >'+this.message+' <span class="ani_dot">...</span></span> ');  
        msgDIV.push(makeCloseDiv());  
        msgDIV.push('</div>');  
        msgEntity = $(msgDIV.join('')).appendTo(document.body);  
        //設定訊息樣式  
        var DivHeight = document.getElementById("toastMessage").offsetHeight;//獲取div塊的高度值
var DivWidth = document.getElementById("toastMessageSpan").offsetWidth;//獲取div塊中文字所在span的寬度值 
        var left = (Width - DivWidth) / 2  +  "px";//距容器左邊的距離  
        var top = (Height - DivHeight) / 2  +  "px";//距容器上方的距離  
        msgEntity.css("bottom","");
msgEntity.css("top","");
        msgEntity.css({'position':'absolute','top':top,'z-index':'999','left':left,'padding':'10px','color': '#FFFFFF','background': 'rgba(0, 0, 0, 0.7)','font-size': '14px','text-align':'center'}); 
        /*var postion = "middle";//預設螢幕正中央顯示
        if("bottom"==postion){
msgEntity.css("bottom",50);
msgEntity.css("top","");//這裡一定要置空
}else if("top"==postion){
msgEntity.css("bottom","");
msgEntity.css("top",50);
}else if("middle"==postion){
msgEntity.css("bottom","");
msgEntity.css("top","");
var h = msgEntity.height(),hh = $(window).height();
msgEntity.css("bottom",(hh-h)/2-20);
}*/
        msgEntity.hide();
    },  
    //顯示動畫  一定時間之後自動關閉
    show :function(){  
        msgEntity.fadeIn(100);  
        setInterval("msgEntity.fadeOut()",this.time);
    },
    //開啟動畫 不限時間
    open :function(){
    msgEntity.fadeIn(100);
    },
    //關閉動畫
    close :function(){
    msgEntity.fadeOut(100);    
    }
}
/**移除字串最後的省略號**/
function removeDot(str){
if(!str) return "";
//獲取最後一個元素
var ch = str.charAt(str.length-1);
if(ch == '.' || ch == ',' || ch == '!'){
str = str.substring(0,str.length-1);
return removeDot(str);
}
return str;
}
function makeCloseDiv(){
/**************開始（此處可自定義關閉圖片路徑）下面是目前正在做的應用實際用到的************************/
var homrUrl = getLocalStorageValue("homeUrl");//此處獲取儲存手機本地的主頁面連線URL
var closePngUrl = homrUrl.substring(0,homrUrl.length-9) + "images/close.png"//擷取主頁面URL根路徑，然後拼接close.png的路徑
/**************結束************************/
var s = "<img src='"+closePngUrl+"' onclick='javascript:new Toast().close();' style='position:absolute;top:-8px; right:-8px; z-index:999;width:25px;height:25px;border-radius:50%;'></img>";
return s;
}
/**用的的圖片為close.png  在附件中已經上傳**/