menu

通过向用户介绍上下文中的新特性和功能，提供价值并鼓励回访相关时刻。

当功能发现提示在上下文相关的时刻呈现给正确的用户时，它们会产生更大的影响。 当在错误的时间出现在错误的用户面前时，它们可能会令人反感。

打开龙头目标     关闭龙头目标

menu
我在这里

通过向用户介绍上下文中的新特性和功能，提供价值并鼓励回访相关时刻。


  <!-- 元素展示 -->
  <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>

  <!-- 龙头目标结构 -->
  <div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>标题</h5>
      <p>一堆文字</p>
    </div>
  </div>

初始化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tap-target');
    var instances = M.TapTarget.init(elems, options);
  });

  // 或用jQuery

  $(document).ready(function(){
    $('.tap-target').tapTarget();
  });

选项

名称 类型 默认 描述
onOpen Function null 打开Tap时调用的回调函数。
onClose Function null 关闭Tap时调用的回调函数。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：


  var instance = M.TapTarget.getInstance(elem);

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.tap-target').tapTarget('methodName');
    $('.tap-target').tapTarget('methodName', paramName);
  */
.open();

打开Tap目标


  instance.next();
  instance.next(3); // 向下移动n次

.close();

关闭Tap目标


  instance.close();

.destroy();

销毁插件实例并回收


  instance.destroy();

属性

名称 类型 描述
el Element 插件初始化时使用的DOM元素。
options Object 初始化实例时使用的选项。
isOpen Boolean tap目标是否是打开的