gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:50:22 26 4
gpt4 key购买 nike

我从事 Material 设计工作,并且正在制作表格。我希望当表单发送到数据库时显示一个带有 toast 的弹出窗口。

文档:Toast Material Desing

我尝试创建一个像这样的函数:

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

test();
</script>

我已经定义了我的 snackbar :

    <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,但出现错误:

Uncaught TypeError: Cannot read property 'showSnackbar' of undefined
at test

但同时我可以使用控制台调用该函数,并且它工作得很好。

我该如何在页面加载时调用 toast 以及我错过的内容?谢谢

最佳答案

问题是函数运行时未加载 Material ,

看看这个例子:

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

关于javascript - 如何在没有按钮的情况下激活 Toast,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45701427/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com