吐司消息像Android這樣

使用這個簡單的代碼，我們可以在電話間隙或Web應用程序創建敬酒消息的Javascript吐司消息像Android這樣

function valiadteLogin() { 
     var msg = "is required", errCount = 0; 
     var pwd = $("#pwd"); 
     var email = $("#email"); 

     if (email.val() == "") { 
      obj = email; 
      msgObj = "Email "+ msg; 
      errCount ++; 
     } 
     if (errCount > 0) { 
      CreateToast(msgObj); 
      //obj.focus(); 
      return false; 
     }else 
     { 
      return true; 
     } 
    }

/* *驗證信息彈出 */

function CreateToast(messageArg) { 
    //alert($(window).height()); 
    $('body').find('.ToastMsg').remove(); 
    ToastMsg = "<div class='ToastMsg' onclick='ToastDismiss(this.id)' id='ToastMsg'><span>"+messageArg+"</span></div>"; 
    $('body').append(ToastMsg); 
    var MsgWidth = $('#ToastMsg span').width(); 
    $('#ToastMsg').width(MsgWidth); 
    setTimeout(function(){ToastDismiss('ToastMsg')},5000); 
} 
function ToastDismiss(args) { 
     $('#'+args).remove(); 
}

CSS

/* /* * Toast Message */

div#ToastMsg.ToastMsg{position: fixed;bottom: 10px;background: rgba(0, 0, 0, 0.68);padding: 10px 20px;left: 0;right: 0;margin: 0 auto;width: auto;text-align: center;color: #fff;border-radius: 25px;} 
div#ToastMsg.ToastMsg span{margin-bottom: 0;}

來源

2016-05-14 Narayan Sarkar

問題是什麼？ –

我建議你使用直接使用this plugin

本機功能這將節省您大量的時間在管理HTML/CSS/JS。它支持iOS，Android和Windows等所有平臺。所以，你不需要擔心平臺兼容性。

window.plugins.toast.showShortBottom("Your toast message goes here.");

插件有更多的自定義選項有一個看看readme file

來源

2016-05-14 15:23:15

吐司消息像Android這樣

回答

相關問題