吐司消息像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;}

问题是什么？ –

答

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

本机功能这将节省您大量的时间在管理HTML/CSS/JS。它支持iOS，Android和Windows等所有平台。所以，你不需要担心平台兼容性。

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

插件有更多的自定义选项有一个看看readme file

吐司消息像Android这样

相关推荐