以编程方式调用 rippleJs

Question

Ripple.JS (GitHub | Demo | CDN) 向 HTML 元素添加 Material 样式波纹，如下所示：

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

问：有没有办法以编程方式调用它？

jsFiddle 中的演示和堆栈片段

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" >Click Me</button>

Answer 1

涟漪是由库中名为 Trigger 的本地函数创建的。由于是本地声明的，我们不能直接执行，但是可以在options.on设置中添加自定义事件类型

我们唯一会遇到的障碍是所有涟漪必须来自某个地方（直观和编程），并且触发器函数将依赖于从像这样传入的事件坐标中获取此信息 ripple.js#L107:

var x = e.pageX - $this.offset().left - $ripple.width() / 2;
var y = e.pageY - $this.offset().top - $ripple.height() / 2;

要伪造它，我们必须构建 trigger our own custom jQuery Event object from scratch and then stub out the pageX and pageY properties by finding the center our our new object using $.offset, .outerWidth(), and .outerHeight() 像这样

$.ripple(".btn", {
  on: 'mousedown <b>ripple</b>', // 触发涟漪效应的事件
});

函数调用波纹（$el）{
  var event = jQuery.Event("<b>ripple</b>");
  event.<b>pageX</b> = $el.offset().left + $el.outerWidth() / 2;
  event.<b>pageY</b> = $el.offset().top + $el.outerHeight() / 2;
  $($el).<b>触发器</b>(事件)
}

jsFiddle 中的演示和堆栈片段

$.ripple(".btn", {
  on: 'mousedown ripple', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

$("#click").click(function() {
  InvokeRipple($("#info"))
});

function InvokeRipple($el) {
 var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
<button class="btn btn-info btn-lg" id="info" >More Info</button>

以编程方式调用 rippleJs

Programmatically invoke rippleJs

javascript

jquery-plugins

material-design

ripplejs

问：有没有办法以编程方式调用它？

jsFiddle 中的演示和堆栈片段