Geek Answers Handbook

MaterializeCss - Manual triggering of the Wave / Ripple effect

I create my site using MaterializeCSS ( http://materializecss.com/ )

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

"Start the wave / ripple effect of a specific button."

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

Can someone point me here?

Code used as an 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 MaterializeCSS ... command

" - , Materialize to , " "

... Waves docs....

Waves.ripple(, ) HTML- programmaticaly.

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

, :

Uncaught TypeError: Waves.ripple

+4
2

!!!

:

  • Waves.js, link https://github.com/fians/Waves/releases

  • "materialize.js" materializeCSS

  • , - ...

    ;/*!
  * 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;
 }

Waves, materializeCSS.... Waves.js.... ?.... COPY Waves.js (PASTE) Waves SECTION materialize.js

  1. ... 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>

" "... effec # but_1

+4

. .

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

- materialize css. MaterializeCSS

, Waves.ripple , Waves.js script CDN.

0

More articles:


All Articles