如何使用 Material Design 中的 Snackbar 和 FloatingActionButton 实现带撤销操作的提示框-JavaScript中文网-JavaScript教程资源分享门户

介绍

Snackbar 和 FloatingActionButton 是 Material Design 中的两个常见组件，分别用于显示短暂提示和浮动操作按钮。本文将介绍如何结合使用 Snackbar 和 FloatingActionButton 实现一个带撤销操作的提示框。撤销操作的实现将通过 JavaScript 的定时器和闭包实现。

效果演示

首先，我们先看一下本文要实现的效果，在用户完成某个操作后，会出现一个 Snackbar 提示框，在该提示框右侧有一个 FloatingActionButton，当用户点击按钮时，触发成功操作，否则间隔一定时间后自动撤销上一次操作，如下图所示：

实现步骤

1. 引入 Material Design 组件

在 head 标签中引入 Material Design 的样式和 JS 文件：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

2. 创建 HTML 结构

// javascriptcn.com 代码示例
<div id="snackbar-container">
    <div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
    </div>
</div>

<div class="fixed-action-btn">
    <a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="fab">
        <i class="material-icons">check</i>
    </a>
</div>

snackbar-container 包裹整个 Snackbar 的容器；
snackbar 是 Snackbar 实际的容器，其中包括文本和操作按钮；
fixed-action-btn 是 FloatingActionButton 的容器，mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored 是 Material Design 中 FloatingActionButton 的类名；
fab 是 FloatingActionButton 实际的容器，其中包括一个带有 material-icons 类名的 iconfont。

3. 创建 Snackbar 实例

在 JavaScript 中，我们需要获取 Snackbar 的实例，实例化方式如下：

// javascriptcn.com 代码示例
var snackbarContainer = document.querySelector('#snackbar-container');
var snackbar = snackbarContainer.querySelector('#snackbar');

var data = {
    message: '操作已完成',
    timeout: 2000, // Snackbar 显示时间
    actionHandler: function() {
        // 操作按钮点击事件
        console.log("操作成功");
    },
    actionText: 'Success', // 操作按钮文本
};
var snackbarInstance = new MaterialSnackbar(snackbar);

snackbarContainer 获取 Snackbar 的容器；
通过 querySelector 获取 Snackbar 的实例；
data 是 Snackbar 的配置参数，包括提示文本、显示时间、操作按钮、操作按钮点击事件等；
最后通过 new MaterialSnackbar(snackbar) 实例化 Snackbar。

4. 创建储存操作历史的变量

创建一个全局变量 history，用于储存操作历史。因为要支持撤销操作，所以 ouruns 必须使用闭包来储存，并通过 addJob 函数给 history 增加元素，代码如下：

// javascriptcn.com 代码示例
var history = [];

function addJob(fn, timeout) {
    var index = history.length;
    history.push(fn);

    setTimeout(function() {
        if (index === history.length - 1) {
            history.pop();
        }
    }, timeout);
}

history 用于保存变量操作；
addJob 用于给 history 增加元素，其中 fn 是要执行的函数，timeout 是执行间隔时间。

5. 定时器和闭包撤销操作

根据上一节中的 addJob 函数，我们可以通过 setTimeout 方法实现撤销操作的延迟执行。同时，在 addJob 函数中利用闭包保存了 index 的值，因此我们可以在撤销时按照顺序执行历史中的函数操作。

// javascriptcn.com 代码示例
window.setInterval(function() {
    if (history.length > 0) {
        snackbarInstance.showSnackbar({
            message: '是否撤销上一次操作？',
            timeout: 5000,
            actionHandler: function() {
                history.pop()();
            },
            actionText: '撤销'
        });
    }
}, 6000);

通过 setInterval 定时器来定时执行撤销操作检测；
判断 history 数组是否为空，如果不为空执行操作，使用 snackbarInstance.showSnackbar 函数呈现 Snackbar；
当 Snackbar 上的操作按钮被点击时，通过 history 数组中储存的闭包执行对应的操作。

6. 为 FloatingActionButton 增加点击事件

var fab = document.querySelector('#fab');
fab.addEventListener('click', function() {
    addJob(function() {
        console.log("操作");
    }, 2000);
    snackbarInstance.showSnackbar(data);
});

通过 querySelector 获取 FloatingActionButton 实例；
通过 addEventListener 给按钮绑定点击事件；
在点击事件中使用 addJob 函数增加操作历史。

完整示例代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
    <title>Snackbar And FloatingActionButton Demo</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    <style>
        #snackbar-container {
            position: fixed;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10%;
        }

        .fixed-action-btn {
            position: fixed;
            right: 3%;
            bottom: 3%;
        }
    </style>
</head>

<body>
    <div id="snackbar-container">
        <div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
            <div class="mdl-snackbar__text"></div>
            <button class="mdl-snackbar__action" type="button"></button>
        </div>
    </div>

    <div class="fixed-action-btn">
        <a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="fab">
            <i class="material-icons">check</i>
        </a>
    </div>

    <script>
        var snackbarContainer = document.querySelector('#snackbar-container');
        var snackbar = snackbarContainer.querySelector('#snackbar');

        var data = {
            message: '操作已完成',
            timeout: 2000, // Snackbar 显示时间
            actionHandler: function() {
                // 操作按钮点击事件
                console.log("操作成功");
            },
            actionText: 'Success', // 操作按钮文本
        };
        var snackbarInstance = new MaterialSnackbar(snackbar);

        var history = [];

        function addJob(fn, timeout) {
            var index = history.length;
            history.push(fn);

            setTimeout(function() {
                if (index === history.length - 1) {
                    history.pop();
                }
            }, timeout);
        }

        window.setInterval(function() {
            if (history.length > 0) {
                snackbarInstance.showSnackbar({
                    message: '是否撤销上一次操作？',
                    timeout: 5000,
                    actionHandler: function() {
                        history.pop()();
                    },
                    actionText: '撤销'
                });
            }
        }, 6000);

        var fab = document.querySelector('#fab');
        fab.addEventListener('click', function() {
            addJob(function() {
                console.log("操作");
            }, 2000);
            snackbarInstance.showSnackbar(data);
        });
    </script>
</body>

</html>

总结

本文介绍了如何使用 Material Design 中的 Snackbar 和 FloatingActionButton 实现一款带撤销操作的提示框。其中，我们运用到了 JavaScript 的闭包和定时器等知识点，希望通过本文的介绍，能够帮助读者更好地理解这些知识点，并能够在实际开发中应用它们。

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