在切换开关更改时显示 toast 消息

Question

我正在 visual studio 中处理 cordova。我创建了一个示例应用程序，它将在 chart 上显示 json data。我还在我的应用程序中放置了一个 toggle button。现在我想显示 toast message 将开关从 off 更改为 on 以及将 on 更改为 off。现在我正在显示一条警报消息。下面是我的 html 切换代码。

<div class="question" style="font-size:x-large; text-align:center">
        Toggle On/Off
    </div>
    <div class="switch" style="text-align:-webkit-center">
        <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" checked="checked">
        <label for="cmn-toggle-7" data-on="On" data-off="Off"></label>
    </div>

对于javascript请看下面的代码

$("#cmn-toggle-7").on("change", function (event) {
            if ($(this).is(":checked")) {
                alert("Switch is On");
            } else {
                alert("Switch is Off");
            }
        });

在 $(this).is(":checked") or not checked 我想在 toast 上显示相同的消息 20 秒，因为它在警报时显示

如有任何帮助，我们将不胜感激

Answer 1

我认为您需要此代码；

<button onclick="myFunction()">Show Snackbar</button>

<div id="snackbar">Some text some message..</div>

<script>
function myFunction() {
    var x = document.getElementById("snackbar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

欲了解更多信息，请点击此处link

Answer 2

Cordova 解决方案

您的警报正在运行，因此您无需更改它只需添加一个 toast 插件 PhoneGap Toast plugin 并将 toast 设置为您的条件

$("#cmn-toggle-7").on("change", function (event) {
    if ($(this).is(":checked")) {
        //alert("Switch is On");
        window.plugins.toast.showWithOptions(
        {
            message: "Switch is On",
            duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
            position: "bottom",
            addPixelsY: -40  // added a negative value to move it up a bit (default 0)
        },
            onSuccess, // optional
            onError    // optional
        );
    } else {
        //alert("Switch is Off");
        window.plugins.toast.showWithOptions(
        {
            message: "Switch is Off",
            duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
            position: "bottom",
            addPixelsY: -40  // added a negative value to move it up a bit (default 0)
        },
            onSuccess, // optional
            onError    // optional
        );
    }
});

function onSuccess(){}
function onError(){}

Answer 3

我在 jquery 中使用 toastr 解决了这个问题，因为它很容易使用。我只需要通过 nuget 安装它并执行以下步骤。

Link 到 toastr.ss <link href="toastr.css" rel="stylesheet"/>
Link 到 toastr.js <script src="toastr.js"></script>
使用 toastr 为信息、成功、警告或错误显示祝酒词

// Display an info toast with no title toastr.info('Are you the 6 fingered man?')

//Display a success toast with no title toastr.success('Switch is on','',{timeOut: 2000})

有关详细信息，请参阅 github

中的 link

在切换开关更改时显示 toast 消息

Show toast message on toggle switch change

javascript

jquery

android

toast

cordova