Question

使用这个简单的代码，我们可以在手机间隙或网络应用中创建吐司信息的Javascript

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

/ * / * *祝酒词 * /

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;}

Answer 1

我建议您直接使用this plugin

来使用本机功能

这将为您节省大量管理html / CSS / JS的时间。它支持iOS，Android和Windows等所有平台。因此，您无需担心平台兼容性。

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

插件有更多自定义选项，请查看readme file

Answer 2

尝试使用此轻便简单的ToastMaker库，该库创建类似于Android Toast消息的Toast通知。这是一个小型库，大小只有 1KB 。

$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="mybutton">Show Toast</button>

像Android一样的Toast消息

2 个答案:

访问API Page以查看更多示例