Материализация многоэтапного поиска объектов - PullRequest
Новая
       9

Материализация многоэтапного поиска объектов

0 голосов
/ 11 октября 2018

Я использую Материализация , и я хотел бы вставить несколько шагов обнаружения функций в меню справки.

У меня есть функционал CodePen макет, но последующие шаги расширяют область просмотра (высота / ширина) и неправильно оформляют элемент.Есть ли лучший способ пошагового прохождения элементов?

JavaScript 

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

function next(n) {
  var inst;

  // Get each of the elements
  var elems = document.querySelectorAll(".tap-target");

  var current = n;
  var prev = --n;

  // If a previous target is open, close it.
  if(prev >= 0) {
    inst = M.TapTarget.getInstance(elems[prev]);
    inst.close();
    inst.destroy();
  }

  // Then, open the new target
  inst = M.TapTarget.getInstance(elems[current]);
  inst.open();
}

HTML 

<button id="help" onclick="next(0)">help</button>

<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>

<div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="next(1)">Next</div>
    </div>
  </div>

 <div class="tap-target red" data-target="menu2">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="closeAll()">Dismiss</div>
    </div>
  </div>

1 Ответ

0 голосов
/ 28 января 2019

Я нашел способ сделать это.В своем html, в конце каждой цели, добавьте следующее: 

<div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><!--Your button code here--></div>

Таким образом, это должно выглядеть так:

<button id="help" onclick="next(0)">help</button>

<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>

<div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="next(1)">Next</div>
    </div>
    <div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a></div>
  </div>

 <div class="tap-target red" data-target="menu2">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
      <div class="next" onclick="closeAll()">Dismiss</div>
    </div>
    <div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a></div>
  </div>

Вы можете изменить положение цели в линейном стиле.Насколько я понимаю, при загрузке страницы Materialise должен загрузить код, который я дал вам для цели, но каким-то образом в v1.0 он не будет работать.Поэтому вам нужно будет добавить его вручную.

...