Вызов функции, когда вкладка выбрана в свете дизайна материалов

У меня есть три вкладки на странице.

<!-- Tabs -->
<div class="mdl-layout__tab-bar">
  <a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
  <a href="#plots-data-tab" class="mdl-layout__tab">Plots data</a>
  <a href="#report-tab" class="mdl-layout__tab">Report</a>
</div>

Мне нужно перерисовать графики, когда выбрана вкладка Plots. Я пытался onclick="redraw_plots();" перейти на вкладку Plots, но функция вызывается слишком быстро, прежде чем вкладка активируется. Есть ли способ получить событие, когда эта вкладка активируется?

Спасибо.


javascript material-design-lite
person sashk    schedule 20.10.2015    source источник
comment
Ваш вопрос только что заставил мой мозг расплавиться ... не могли бы вы попытаться уточнить, пожалуйста?   -  person An0nC0d3r    schedule 20.10.2015
comment
Вы хотите вызвать redraw_plots после завершения анимации выбора вкладки?   -  person Roger Russel    schedule 20.10.2015
comment
@RogerRussel Я хочу вызвать redraw_plots, когда вкладка выбрана и отображается на экране.   -  person sashk    schedule 21.10.2015
comment
@sashk Думаю, я понимаю вашу проблему, но, пожалуйста, сделайте пример на jsfiddle.net , ваша проблема в том, что он активируется до mdl click, и вы хотите, чтобы оно запускалось после смены вкладок mdl, не так ли?   -  person Roger Russel    schedule 21.10.2015
comment
@RogerRussel Правильно. Я добавлю ссылку на jsfiddle позже...   -  person sashk    schedule 21.10.2015
comment
@RogerRussel вот он - jsfiddle.net/v52z1sed/5   -  person sashk    schedule 21.10.2015
comment
@sashk Я написал это JsFiddle с некоторыми примерами событий, которые вы можете попробовать.   -  person Roger Russel    schedule 21.10.2015
comment
@sashk Я добавляю прослушивание событий в ваш код jsfiddle.net/v52z1sed/6, не могли бы вы проверить работает?   -  person Roger Russel    schedule 21.10.2015
comment
Давайте продолжим обсуждение в чате.   -  person sashk    schedule 21.10.2015

Ответы (3)


arrow_upward
3
arrow_downward

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

Чтобы выполнить после события вкладки MDL, вы можете сделать следующее:

С ванильным Javascript:

Сначала добавьте идентификатор на ссылку

<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>

Второе добавление прослушивателя событий

document.getElementById("#plots-tab").addEventListener("click", function(){
   redraw(); 
});

Или с Jquery:

Добавить прослушиватель событий на элемент

$('a[href="#plots-tab"]').on('click',function(){
   redraw();        
});
person Roger Russel    schedule 21.10.2015
comment
Спасибо, @RogerRussel! - person sashk; 22.10.2015

arrow_upward
0
arrow_downward

Для меня было недостаточно подключиться к событию клика. Тайм-аут не менее 0 миллисекунд был необходим, иначе для отображения содержимого все равно будет установлено значение none (проверено в Chrome), и любой ваш собственный рисунок, требующий расчета ширины, может завершиться ошибкой. Проверьте прикрепленный фрагмент и убедитесь, что без setTimeout в событии щелчка для отображения содержимого вкладки установлено значение «Нет», а не «блокировка». MDL должен воспроизводить анимацию для плавного перехода, который вызывает проблемы с отрисовкой абсолютного положения.

$('.mdl-layout__tab-bar').children().each(function(){
  
  $(this).on('click', function(){
    var timeout = 0;
    var targetContent = this.getAttribute('href');
    
    setTimeout(function(){
      if($(targetContent).css('display') == "block"){
         console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
      }
      else{
      console.warn("increase timeout to make sure that content is visible");
      }
    }, timeout);
    
   
  });
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content">
        Tab 1
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content">
      Tab 2
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content">
      Tab 3
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content">
      Tab 4
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content">
      Tab 5
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content">
      Tab 6
      </div>
    </section>
  </main>
</div>

person MFAL    schedule 25.01.2017
comment
Я пробовал использовать Google Chrome Versão 71.0.3578.98 (Officia Versionl) 64 бит, но тайм-аут не был необходим. Могу я спросить вас, какая версия Chrome использовалась в вашем тесте? - person Roger Russel; 14.12.2018

arrow_upward
0
arrow_downward

Другим решением без добавления чего-либо особенного к тегам a было бы

$("a.mdl-layout__tab").click(event => {
    console.log("Tab switched!");
});
person Bungeefan    schedule 29.07.2019