Блог

Главная - Вопросы по программированию - Как узнать, какая кнопка была нажата в модальном режиме материализации?

Как узнать, какая кнопка была нажата в модальном режиме материализации?

#javascript #materialize

Вопрос:

Я использовал tingle.js и pikday, и теперь я хочу использовать материализованный css, потому что он получил как модальный, так и выбор дня.

В tingle я добавляю кнопки, и действие после нажатия кнопки легко

 //add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

Я настроил несколько кнопок в Materialize https://jsfiddle.net/radek/onzx31q6/6/ но я не знаю, как узнать, на какую кнопку нажали.

  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>

Ответ №1:

Вы можете использовать пользовательский атрибут, чтобы отслеживать, какая кнопка была нажата для материализации, как я это сделал ниже.

 (() => {
  // the Modal.onClose event handler
  const onCloseEnd = (modal) => {
    const last = document.querySelector(`#${modal.id}`).getAttribute('data-clicked');
    document.querySelector('#last-clicked').innerText = last;
  };

  // set up modals
  const nodes = document.querySelectorAll('.modal');
  const modals = M.Modal.init(nodes, {
    onCloseEnd
  });

  // add event for footer buttons to change data-clicked property
  nodes.forEach(node => {
    node.querySelectorAll('.modal-footer a')
      .forEach(btn => {
        btn.addEventListener('click', evt => {
          node.setAttribute('data-clicked', evt.target.innerText);
        }, true);
      });
  });
})(); 
 <!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <button data-target="modal1" class="btn modal-trigger">Modal</button>

  <h5>You clicked: <span id="last-clicked">nothing</span></h5>

  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>

Комментарии:

1. Я понял концепцию, которую вы предложили. Спасибо за это. Не могли бы вы, пожалуйста, объяснить самую первую и последнюю строку кода? Также определение onCloseEnd функции обратного вызова. Вы хотите, чтобы я создал для этого еще один вопрос?

2. является ли атрибут ` node.setAttribute («щелчок по данным», evt.target.innerText);’будет запоминаться в следующий раз, когда будет открыт тот же модальный? Мне кажется, что нет. Знаете ли вы, почему?

3. Это onCloseEnd часть событий Материализации. Да data-clicked , атрибут сохраняется до тех пор, пока не будет нажата другая кнопка в этом модальном режиме. Вам нужно будет получить к нему доступ, когда он вам понадобится. node.getAttribute('data-clicked')

4. Я имел в виду синтаксис (() => { , определение функций const onCloseEnd = (modal) => {

Метки: ,