MaterializeCss - Wave/Ripple 效果手动触发答案

【问题标题】：MaterializeCss - Wave/Ripple effect manually triggerMaterializeCss - Wave/Ripple 效果手动触发
【发布时间】：2016-08-03 17:06:00
【问题描述】：

我正在使用 MaterializeCSS (http://materializecss.com/) 构建我的网站

我想知道如何手动触发 Wave/Ripple 效果到某些控件，例如：

“触发某个按钮的波浪/波纹效果。”

MaterializeCSS 团队认为他们使用“Waves.js”javascript 库 (http://fian.my.id/Waves/) 的一个端口，但是当我尝试使用这些命令时，浏览器控制台中会出现错误。

有人可以在这里指出我吗？

示例代码：

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="jquery/jquery.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <title>My website title</title>
    </head>

    <body>
        <script type="text/javascript">
            $(document).ready(function() {              
                Waves.ripple('#but_1');
            });
        </script>

        <a id="but_1" class="waves-effect waves-light btn">button</a>

    </body>
</html>

根据 MaterializeCSS 团队...

“Waves 是我们在 Materialise 中包含的一个外部库允许我们创建 Material Design 中概述的墨水效果”

...根据 Waves 文档 ....

Waves.ripple(elements, options) 在 HTML 元素中创建波纹效果以编程方式。

(http://fian.my.id/Waves/#api)

所以在浏览器控制台中我得到了这个错误：

未捕获的 TypeError：Waves.ripple 不是函数

【问题讨论】：

你能用出现的错误更新你的问题吗？
完成，问题已编辑
我明白……Waves 对象没有波纹功能……但是……我迷路了
尝试在您的 html 中包含 wave 库中的 API。
波浪效果（波纹），确实有效......但只有当我的按钮被点击时......我想通过代码重现相同的效果。

标签： javascript material-design materialize ripple wave

【解决方案1】：

以上答案都不适合我。玩弄这个并设法使用以下方法触发它

                Waves.attach('#refresh', ['waves-light']);
                Waves.ripple('#refresh');

【讨论】：

【解决方案2】：

我找到了解决方案 !!!

步骤：

下载最新版Waves.js，链接https://github.com/fians/Waves/releases
从 materializeCSS 文件中打开名为“materialize.js”的文件

打开后，尝试查找以...开头的部分

;/*!
  * Waves v0.6.4
  * http://fian.my.id/Waves
  *
  * Copyright 2014 Alfiana E. Sibuea and other contributors
  * Released under the MIT license
  * https://github.com/fians/Waves/blob/master/LICENSE
  */

  ;(function(window) {
  'use strict';

  var Waves = Waves || {};
  var $$ = document.querySelectorAll.bind(document);

  // Find exact position of element
  function isWindow(obj) {
      return obj !== null && obj === obj.window;
 }

该部分属于内嵌在 materializeCSS 中的 Waves 库 .... 将所有该部分代码替换为 Waves.js 的新代码 .... 怎么样？ ....复制最新版Waves.js的代码，在materialize.js里面的Waves SECTION里面替换(PASTE)

现在......在你的 HTML 文件中你应该有这样的东西（检查 cmets）

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--ADD the CSS from materializeCSS -->
    <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="jquery/jquery.min.js"></script>

    <!-- Add the file "materialize.js" ... the one you just modified -->
    <script type="text/javascript" src="js/materialize.js"></script>

    <!-- Add the CSS from Waves.js -->
    <link type="text/css" rel="stylesheet" href="waves/waves.css"  media="screen,projection"/>

    <!-- DO NOT ADD the Waves.js
    <script type="text/javascript" src="wave/waves.js"></script>
    -->

    <title>Your site</title>
</head>
 <body>
    <script type="text/javascript">
        function clickbut() {
            //Now you can use the Waves.ripple function!!!
            Waves.ripple('#but_1');
        };

        $(document).ready(function() {              
            //Initialize the Waves module
            Waves.init()
        });
    </script>


    <h2 class="left-align"><i class="left-align medium material-icons">touch_app</i>My website Header</h2>


    <button  onclick="clickbut()">click me</button>

    <a class="waves-effect waves-light btn ">button</a>

    <a id="but_1" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

    <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

</body>
</html>

如果你点击“点击我”按钮...涟漪效果将在#but_1 按钮中播放

【讨论】：

【解决方案3】：

我一直将波浪效果作为一个类添加到按钮中。它在按钮单击时触发。

<a class="waves-effect waves-light btn">button</a>

这是来自物化 css 网站上的第一个按钮示例。 Buttons on MaterializeCSS

如果显示 Waves.ripple 函数不存在，请尝试从 CDN 引入 Waves.js 脚本。

【讨论】：

是的，我刚刚更新了我的问题。我也以此为例……但我必须手动执行 Waves-Effect ……而不是在单击按钮时。我也不想执行按钮的onClick功能