如何使用 Material Design 中的 Snackbar 和 FloatingActionButton 实现带撤销操作的提示框

介绍

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

效果演示

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

实现步骤

1. 引入 Material Design 组件

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

----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------

2. 创建 HTML 结构

---- ------------------------
    ---- ------------- ---------------------- --------------
        ---- ---------------------------------
        ------- ---------------------------- -----------------------
    ------
------

---- -------------------------
    -- ----------------- ------------- --------------- -------------------- -------------------- ---------
        -- --------------------------------
    ----
------
  • 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 的实例，实例化方式如下：

--- ----------------- - ----------------------------------------------
--- -------- - ---------------------------------------------

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

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

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

--- ------- - ---

-------- ---------- -------- -
    --- ----- - ---------------
    -----------------

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

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

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

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

6. 为 FloatingActionButton 增加点击事件

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

完整示例代码

--------- -----
------

------
    --------------- --- -------------------- ------------

    ----- ---------------- ---------------------------------------------------------------
    ----- ---------------- -----------------------------------------------------------------
    ------- ----- ------------------------------------------------------------

    -------
        ------------------- -
            --------- ------
            -------- ----
            ----- ----
            ---------- -----------------
            ------- ----
        -

        ----------------- -
            --------- ------
            ------ ---
            ------- ---
        -
    --------
-------

------
    ---- ------------------------
        ---- ------------- ---------------------- --------------
            ---- ---------------------------------
            ------- ---------------------------- -----------------------
        ------
    ------

    ---- -------------------------
        -- ----------------- ------------- --------------- -------------------- -------------------- ---------
            -- --------------------------------
        ----
    ------

    --------
        --- ----------------- - ----------------------------------------------
        --- -------- - ---------------------------------------------

        --- ---- - -
            -------- --------
            -------- ----- -- -------- ----
            -------------- ---------- -
                -- --------
                --------------------
            --
            ----------- ---------- -- ------
        --
        --- ---------------- - --- ---------------------------

        --- ------- - ---

        -------- ---------- -------- -
            --- ----- - ---------------
            -----------------

            --------------------- -
                -- ------ --- -------------- - -- -
                    --------------
                -
            -- ---------
        -

        ----------------------------- -
            -- --------------- - -- -
                -------------------------------
                    -------- -------------
                    -------- -----
                    -------------- ---------- -
                        ----------------
                    --
                    ----------- ----
                ---
            -
        -- ------

        --- --- - -------------------------------
        ----------------------------- ---------- -
            ----------------- -
                ------------------
            -- ------
            ------------------------------------
        ---
    ---------
-------

-------

总结

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

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651eb88195b1f8cacd664fce

阅读全文

猜你喜欢

  • CSS Flexbox 实现面试题列表页布局的技巧

    在前端开发中，我们经常需要使用到列表页布局，而面试题列表页是其中比较常见的一种类型。面试题列表页需要展示多个面试题目，并对每个面试题目进行排版和布局。本文将介绍如何使用 CSS Flexbox 技术实...

    1 年前
  • 如何保证 RESTful API 接口的版本兼容性

    RESTful API 是现在互联网应用开发中最常用的接口规范之一。对于一个长期发展的系统来说，API 的升级是不可避免的。但是，每个版本的接口间可能存在较大的差异，开发人员必须确保新版本的 API ...

    1 年前
  • RxJS 实现无限滚动功能，让页面流畅无卡顿

    在Web开发中，实现无限滚动往往是一项重要的功能，能够提升用户交互体验，让页面更加流畅，减少卡顿。RxJS是JavaScript中非常流行的函数响应式编程库，可以方便地实现无限滚动功能。

    1 年前
  • Koa 项目中如何使用 Vuetify 实现 UI 界面开发

    在前端技术领域，Vue.js 是目前最受欢迎的框架之一，它提供了便捷的数据绑定和组件化开发方式。而为了更加高效地开发 Vue.js，我们还需要一个强大的 UI 框架来完成 UI 界面的开发。

    1 年前
  • 在 Deno 中使用 HTTP 请求时遇到的常见错误

    引言 Deno 是桥梁昨天官方发布的一款新型的安全运行时环境，它支持 TypeScript 和 JavaScript 等多种语言，并集成了常用的功能模块，如 HTTP 请求、格式化模板、加密解密等。

    1 年前
  • Docker 容器遇到 “Unable to locate package” 问题的解决方法

    背景 Docker 是一种轻量级的容器技术，可以让开发者将应用程序打包成独立的容器，它非常适合前端类的开发工作。但是，在使用 Docker 的时候，我们有可能会遇到 “Unable to locate...

    1 年前
  • MongoDB 使用优化技巧整理

    随着互联网技术的不断发展，越来越多的网站开始采用 MongoDB 作为其数据存储方案。与传统的关系型数据库相比，MongoDB 具有高性能、高可扩展性以及易于部署等优点。

    1 年前
  • TypeScript 中的字符串模版如何使用 ${} 表达式

    TypeScript 是一种由微软开发的开源编程语言，它支持 JavaScript 的所有语法功能，同时还提供了额外的类型检查和注释支持。在前端开发中，经常需要处理字符串拼接的问题，而 TypeScr...

    1 年前
  • Fastify 异步支持及相关实践

    前言 随着移动互联网和云计算的发展，Web 应用程序的重要性日益增加。在开发过程中，遇到的最常见的问题是性能（如快速响应、高并发等）和代码可维护性。使用 Node.js 作为服务器环境，可以有效解决这...

    1 年前
  • ECMAScript 2016 之 Object.setPrototypeOf 和 Reflect.ownKeys

    ECMAScript 2016 引入了两个新的特性：Object.setPrototypeOf 和 Reflect.ownKeys。这两个特性对于前端开发非常有用，可以帮助我们更好地进行对象的操作和管...

    1 年前
  • Redis CPU 占用过高的一些可能原因及排查方法

    背景介绍 Redis 是一个常用的 NoSQL 数据库，被广泛应用于各种互联网应用的缓存、计数器、消息队列等场景中。但在使用 Redis 时，我们可能会遇到 Redis CPU 占用过高的问题，这提示...

    1 年前
  • 在 Vue.js 中使用 GraphQL 及其生态系统：例子使用

    GraphQL 是一种 API 查询语言和运行时，它被设计为更高效、强大和灵活的替代 REST。Vue.js 是一种流行的前端框架，用于构建交互式应用程序。在本文中，我们将探讨如何在 Vue.js 中...

    1 年前
  • Mongoose 操作 MongoDB 日期类型的技巧与应用

    在 MongoDB 中，日期类型是一种常见的数据类型，也是前后端开发过程中最常遇到的数据类型之一。当我们使用 Node.js 进行 MongoDB 开发时，使用 Mongoose 框架可以帮助我们更方...

    1 年前
  • ES11 模块调试技巧：如何在浏览器中优化模块导入

    随着 JavaScript 的不断发展，使用模块化管理代码已成为必不可少的技术。ES6 推出了类似于 Node.js 的模块加载方式，并对其进行了进一步改进。ES11 在此基础上提供了一些优化工具，使...

    1 年前
  • Next.js 服务器端渲染性能优化实践

    什么是 Next.js Next.js 是一款 React 应用程序的服务端渲染框架，其的优点在于简单易用，且具有良好的性能表现，完美支持 React 的多种特性，使得业务团队可以快速构建高可靠性的 ...

    1 年前
  • LESS 构建符合 Web 标准的页面的最佳实践

    前端开发离不开 CSS，而 LESS 是一款广泛应用的样式预处理器，它能够扩展 CSS 的功能，使得样式表更加有逻辑性，简洁易维护。本文将介绍如何使用 LESS 构建符合 Web 标准的页面的最佳实践...

    1 年前
  • 在 Node.js 中使用 Async 模块进行异步流程控制的技巧

    在 Node.js 中进行异步流程控制是开发者经常遇到的一个问题。这个问题有多种解决方法，其中一个比较流行的是使用 Async 模块。本文将介绍如何使用 Async 模块来管理异步流程，并提供一些实用...

    1 年前
  • ES6 中的 generator 函数异步流控制及解决同步异步问题

    ES6 引入了 Generator 函数，可以通过控制异步流程、解决同步异步问题等，具有很强的实用性。本文将详细介绍 ES6 中 Generator 函数的异步流控制及解决同步异步问题的应用，以及通过...

    1 年前
  • 解决 React 中的跨组件通信问题

    React 是目前前端开发中非常流行和常用的框架之一，但在开发过程中，我们经常遇到跨组件通信的问题，也就是一个组件需要与其他组件进行数据交互。这个问题的解决涉及到 React 的基本理念和一些最佳实践...

    1 年前
  • Sequelize 快速入门指南，5 分钟上手数据库 ORM 框架

    什么是 Sequelize？ Sequelize 是一个基于 Node.js 的 ORM（Object Relational Mapping） 框架，它将 JavaScript 对象和关系型数据库之间...

    1 年前

相关推荐

    暂无文章