MaterializeCss - Wave/Ripple 效果手动触发

Question

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

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

"Trigger the wave/ripple effect of certain button."

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 is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design"

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

Waves.ripple(elements, options) Create a ripple effect in HTML element programmaticaly.

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

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

Uncaught TypeError: Waves.ripple is not a function

Answer 1

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

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

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

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

Answer 2

我找到了一个解决方案 !!!

步骤：

下载最新版本 Waves.js , link 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文件中你应该有这样的东西（检查评论）

<!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>

如果您单击 "click me" 按钮...将在 #but_1 按钮中播放涟漪效果

Answer 3

None 以上答案对我有用。玩弄这个并设法使用以下

触发它

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

MaterializeCss - Wave/Ripple 效果手动触发

MaterializeCss - Wave/Ripple effect manually trigger

javascript

material-design

materialize

ripple

wave