个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
27
4
我正在使用 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 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
最佳答案
我找到了一个解决方案!!!
步骤:
下载最新版本的 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 文件中您应该有这样的东西(检查评论)
<!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 按钮中播放
关于javascript - MaterializeCss - Wave/Ripple 效果手动触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36584226/
27
4
0
我可以使用 javascript 和其他所有东西，但在重新发明轮子之前，我想知道是否已经有一个类似的 jquery 插件，因为我想使用那个框架而不是 mootools。 我没有钱的问题，特别是 5 欧
我正在 React 应用程序中处理动画。我需要动画在悬停 后开始工作。我尝试了 :hover:after css 但不起作用。将鼠标悬停在图像上后动画可以工作，但我需要在悬停后开始。将鼠标悬停在图像上
我正在使用 jQuery 在按钮单击时实现 slider 效果。我的代码是: $(document).ready(function() { $("#mybutton").click(functio
我需要一个div标签在屏幕右侧滑出，如何使用jQuery获得这种效果？我一直在看这里:http://api.jquery.com/category/effects/sliding/而且这似乎不是我要找
我正在使用此代码实现页面 curl 效果......它在模拟器和设备中工作正常......但它不是(setType:@“pageCurl”)苹果记录的api，这导致它被iPhone拒绝App Stor
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？ 我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？ 我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
我正在尝试模拟这种效果:http://meyerweb.com/eric/css/edge/complexspiral/demo.html在我的博客上:http://segment6.blogspot
我尝试将样式应用到 Accordion Pane ，但遇到了问题。 这行不通。 accordion.setEffect(new DropShadow(BlurType.ONE_PASS_BOX, Co
关于 Datatables website 的教程足够清楚了: 在我告诉 Datatables 我正在谈论哪一列后，我只需将切换按钮放入: column.visible( ! column.visib
我正在寻找 scratchOut 效果，随便叫它什么。 这是从前景中删除图像的效果，因此背景图像变得可见。 我曾尝试使用 jquery 插件重新创建此效果，但它并不像我希望的那样流畅。 有没有人有这种
本文实例讲述了android实现文字和图片混排(文字环绕图片)效果。分享给大家供大家参考，具体如下： 在平时我们做项目中，或许有要对一张图片或者某一个东西进行文字和图片说明，这时候要求排版美观，所
本文实例讲述了Javafx简单实现【我的电脑资源管理器】效果。分享给大家供大家参考。具体如下： 1. java代码： ?
我是 ngrx 的新手，正在尝试让我的 ngrx 商店的 @Effect 函数正常工作。下面的代码显示了如果我没有使用 ngrx 商店，服务是如何工作的。我首先调用 http.get 来获取列表，然后
基本上我搜索了很多，解决方案建议应用一些 PNG 掩码或不提供所需的解决方案。 我发现了什么。 ffmpeg -i main.mkv -i facecloseup.mkv -filter_compl
有关使用从商店中选择的状态的效果的 Ngrx 文档状态(没有双关语意) Note: For performance reasons, use a flattening operator like co
我有一个数据网格控件，我在其中使用名为 FastShadow 的自定义效果，它就像一个光晕。 我希望效果在其边界之外发光，这样很好，但是当我在顶部绘制另一个形状时，我不希望这个形状受到影响。在本例中，
除了子 div.exception 中的所有内容，我想将 div.main 中的所有文本设为灰色。 div.exception 应该看起来好像类 main 从未添加到父 div。 这可能吗？如果是这样
我有一个 PDF 文件，我想重现此包页面中的页面 curl 效果: https://pub.flutter-io.cn/packages/page_turn 我试过用这个 page_turn插件，它需
我想测试一个效果如下: 如果调度了 LoadEntriesSucces 操作，则效果开始 等待 5 秒 5 秒后发送 http 请求 当响应到达时，将分派(dispatch)新的操作(取决于响应是成功
我是一名优秀的程序员,十分优秀！