使用 Material Design Lite 实现 Toast 提示的技巧-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 开发中，我们经常需要给用户一些提示信息，比如操作成功、操作失败等。而 Toast 提示是一种比较常见的提示方式，它可以在页面的某个位置短暂地显示一条信息，并在几秒钟后自动消失。本文将介绍如何使用 Material Design Lite 实现 Toast 提示，并提供示例代码。

Material Design Lite 简介

Material Design Lite（简称 MDL）是 Google 推出的一款用于构建 Material Design 风格 Web 应用的前端框架。它基于 HTML、CSS 和 JavaScript，提供了一系列 UI 组件和样式，让开发者可以快速构建符合 Material Design 风格的 Web 应用。

MDL 提供了一个 Toast 组件，可以用来实现 Toast 提示。Toast 组件有两种类型：纯文本和带操作按钮。纯文本 Toast 只显示一条文本信息，而带操作按钮的 Toast 可以在文本信息下方显示一个或多个操作按钮。

实现纯文本 Toast

实现纯文本 Toast 非常简单，只需要引入 MDL 库，然后在 HTML 中添加一个 div 元素，并设置其 class 为 "mdl-js-snackbar mdl-snackbar"，并在 div 元素内部添加一个 span 元素，用于显示提示信息。接着，调用 Snackbar() 函数，即可显示 Toast。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Toast 示例</title>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
  </div>
  <button onclick="showToast()">显示 Toast</button>
  <script>
    function showToast() {
      var snackbarContainer = document.querySelector('.mdl-js-snackbar');
      var data = { message: '操作成功' };
      snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }
  </script>
</body>
</html>

在上面的代码中，我们在 body 中添加了一个按钮，当用户点击该按钮时，就会显示一个 Toast，显示的文本信息为 "操作成功"。

实现带操作按钮的 Toast

实现带操作按钮的 Toast 也很简单，只需要在 HTML 中添加一个 button 元素，用于显示操作按钮，然后在 JS 中设置 actionText 和 actionHandler 属性，即可显示带操作按钮的 Toast。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Toast 示例</title>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
  <button onclick="showToast()">显示 Toast</button>
  <script>
    function showToast() {
      var snackbarContainer = document.querySelector('.mdl-js-snackbar');
      var data = {
        message: '是否确认删除？',
        actionText: '删除',
        actionHandler: function(event) {
          alert('删除成功');
        }
      };
      snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }
  </script>
</body>
</html>

在上面的代码中，我们在 Snackbar() 函数中设置了 actionText 和 actionHandler 属性，当用户点击操作按钮时，就会执行 actionHandler 函数，弹出一个提示框，显示 "删除成功"。

总结

本文介绍了如何使用 Material Design Lite 实现 Toast 提示，并提供了示例代码。Toast 提示是一种比较常见的提示方式，使用 MDL 实现起来非常简单，开发者可以根据自己的需求，灵活地使用纯文本 Toast 和带操作按钮的 Toast。希望本文对读者有所帮助，让大家能够更好地开发符合 Material Design 风格的 Web 应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65840763d2f5e1655ded121e