我正在使用MaterialiseCSS(http://materializecss.com/)
构建我的网站我想知道如何手动触发Wave / Ripple效果到某个控件,例如:
"触发某个按钮的波形/波纹效果。"
MaterialiseCSS团队认为他们使用的是" 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>
根据MaterialiseCSS TEAM ...
&#34; Waves是我们在Materialise中包含的外部库 允许我们创建Material Design&#34;
中概述的墨水效果
...并且根据Waves docs ....
Waves.ripple(elements,options)在HTML元素中创建一个涟漪效果 programmaticaly。
(http://fian.my.id/Waves/#api)
所以在浏览器控制台中我收到此错误:
未捕获的TypeError:Waves.ripple不是函数
答案 0 :(得分:4)
我找到了解决方案 !!!
步骤:
下载最新版本的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最新版本的代码,并在waves SECTION里面替换(PASTE)materialize.js
现在......在您的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>
如果单击“单击我”按钮...将在#but_1按钮中播放涟漪效果
答案 1 :(得分:0)
我总是将wave-effect添加为按钮的类。它会在按钮单击时触发。
<a class="waves-effect waves-light btn">button</a>
这是来自materialize css网站上的第一个按钮示例。 Buttons on MaterializeCSS
如果说Waves.ripple函数不存在,请尝试从CDN引入Waves.js脚本。
答案 2 :(得分:0)
以上所有答案均不适用于我。玩了一下,并设法使用以下命令触发它
Waves.attach('#refresh', ['waves-light']);
Waves.ripple('#refresh');