Question

我使用材料设计，我正在处理表格。我希望在数据库中发送表单时显示一个带有Toast的弹出窗口。

我尝试创建这样的函数：

FaceId

我定义了我的零食吧：

 <script>
        function test() {
            var notification = document.querySelector('.mdl-js-snackbar');
            console.log(notification);
            notification.MaterialSnackbar.showSnackbar(
                {
                    message: 'Image Uploaded'
                }
            );
        }

        test();
 </script>

我希望在加载页面时显示吐司，但我发现错误：

    <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised " type="button" onclick="test()">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button" ></button>
</div>

但同时我可以使用控制台调用该功能，它可以完美地工作。

如何在加载页面时调用toast以及我错过了什么？感谢

Answer 1

问题是当函数运行时没有加载材料，

看一下这个例子：

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
  <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</body>
<script>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });

    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


</script>

如何在没有按钮的情况下激活Toast

1 个答案: