最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - MaterializeCss - WaveRipple effect manually trigger - Stack Overflow

programmeradmin2浏览0评论

I am building my site using MaterializeCSS (/)

I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:

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

The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (/) , but when I try to use the mands, errors appear in the browser console.

Can someone point me out here?

Code used as example:

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

According to the MaterializeCSS TEAM ...

"Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design"

... and according to Waves docs ....

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

()

So in the Browser Console I get this error:

Uncaught TypeError: Waves.ripple is not a function

I am building my site using MaterializeCSS (http://materializecss./)

I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:

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

The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (http://fian.my.id/Waves/) , but when I try to use the mands, errors appear in the browser console.

Can someone point me out here?

Code used as example:

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

According to the MaterializeCSS TEAM ...

"Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design"

... and according to Waves docs ....

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

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

So in the Browser Console I get this error:

Uncaught TypeError: Waves.ripple is not a function

Share Improve this question edited Dec 15, 2017 at 7:26 Cœur 38.8k26 gold badges205 silver badges277 bronze badges asked Apr 12, 2016 at 21:18 user695800user695800 8
  • 1 Can you update your question with the errors that appear. – odannyc Commented Apr 12, 2016 at 21:22
  • Done, question edited – user695800 Commented Apr 12, 2016 at 21:32
  • I understand ... that Waves object does not have a ripple function .... but ... I am lost – user695800 Commented Apr 12, 2016 at 21:33
  • Try to include the API from the waves library in your html. – odannyc Commented Apr 12, 2016 at 21:50
  • The Wave Effect (Ripple) , DOES work ... but only when my button is clicked .... I want to reproduce the same effect by code. – user695800 Commented Apr 12, 2016 at 21:51
 |  Show 3 more ments

3 Answers 3

Reset to default 5

I found a Solution !!!

Steps:

  1. Download the latest version of Waves.js , link https://github./fians/Waves/releases

  2. Open the file named "materialize.js" from the materializeCSS files

  3. Once opened, try to find the section that starts with something like ...

    ;/*!
      * Waves v0.6.4
      * http://fian.my.id/Waves
      *
      * Copyright 2014 Alfiana E. Sibuea and other contributors
      * Released under the MIT license
      * https://github./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;
     }
    

That section belongs to the Waves library embedded inside materializeCSS .... Replace all that section of code with the new code of Waves.js .... how? .... COPY the code of the latest version of Waves.js, and replace (PASTE) inside the Waves SECTION inside materialize.js

  1. Now ... inside your HTML file you should have something like this (check the ments)

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

If you click the "click me" button ... the ripple effec will be played in the #but_1 button

I have always added waves-effect as a class to the button. It triggers on the button click.

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

This is from the first button example on the materialize css website. Buttons on MaterializeCSS

If it says the Waves.ripple function does not exist, try bringing in the Waves.js script from a CDN.

None of the above answers worked for me. Played around with this and managed to get it to trigger using the following

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

评论列表(0)

  1. 暂无评论