メニュー

文脈的に関連のある瞬間に新しい機能を紹介することで、ユーザーに価値を提供し、再訪を促進します。

機能の発見プロンプトは、文脈的に関係のある正しいユーザーに表示されたときに、より効果的です。間違ったユーザーに間違った時間に提示されると、それらは侵入的かつ迷惑になる可能性があります。

タップターゲットを開く     タップターゲットを閉じる

メニュー
ここにいます

文脈的に関連のある瞬間に新しい機能を紹介することで、ユーザーに価値を提供し、再訪を促進します。


  <!-- Element Showed -->
  <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>

  <!-- Tap Target Structure -->
  <div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
    </div>
  </div>

初期化


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

  // Or with jQuery

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

オプション

名 型 デフォルト 説明
onOpen 関数 null タップターゲットが開いたときに呼び出されるコールバック関数。
onClose 関数 null タップターゲットが閉じられたときに呼び出されるコールバック関数。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンス上で呼び出されます。次のようにプラグインインスタンスを取得できます


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

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

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

タップターゲットを開きます


  instance.next();
  instance.next(3); // Move next n times.

.close();

タップターゲットを閉じます


  instance.close();

.destroy();

プラグインインスタンスを破棄して削除


  instance.destroy();

プロパティ

名 型 説明
el エレメント プラグインが初期化されたDOM要素。
options オブジェクト インスタンスが初期化されたオプション。
isOpen ブーリアン タップターゲットが開いているかどうか。