Таблетки от Bootstrap не справляются с быстрыми изменениями - PullRequest
Новая
       44

Таблетки от Bootstrap не справляются с быстрыми изменениями

0 голосов
/ 28 мая 2019

Я создал установку с помощью таблеток Bootstrap и списка вкладок, в которых отображается соответствующее содержимое при щелчке таблетки.Кажется, до сих пор работало нормально.

Но когда я также добавил Mousetrap для циклического перебора таблеток с помощью горячей клавиши (>), я заметил, что навигационные таблетки не очень хорошо работают с быстрыми изменениями: предыдущаяиногда панели вкладок не скрываются, поэтому будет отображаться несколько контентов.

Тот же самый нежелательный эффект может быть достигнут быстрыми щелчками, поэтому я знаю, что это не проблема мышеловки.(Это просто помогает проиллюстрировать проблему)

Рассмотрим этот фрагмент: 

Mousetrap.bind('>', () => {
  let
  $pills = $('#pills-tab .nav-item'),
      $pill = $pills.has('.active')
  ;
  if ($pill.length) {
    // NEXT, not PREV.
    $pill =
      // if is_edge.
      $pill.index() === $pills.length -1
      ?	$pills.eq(0)
    :	$pill.next()
    ;

    $pill = $pill.find('.nav-link');
    $pill.tab('show');
  }	
})
.instructions {
  margin-top: 30px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="root">
  <div class="controller">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="alpha-tab" href="#alpha" data-toggle="pill" role="tab" aria-controls="alpha" aria-selected="true">alpha</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="bravo-tab" href="#bravo" data-toggle="pill" role="tab" aria-controls="bravo" aria-selected="false">bravo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="charlie-tab" href="#charlie" data-toggle="pill" role="tab" aria-controls="charlie" aria-selected="false">charlie</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="delta-tab" href="#delta" data-toggle="pill" role="tab" aria-controls="delta" aria-selected="false">delta</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="epsilon-tab" href="#epsilon" data-toggle="pill" role="tab" aria-controls="epsilon" aria-selected="false">epsilon</a>
      </li>
    </ul>  
  </div>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="alpha" role="tabpanel" aria-labelled-by="alpha-tab">Alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha.</div>
    <div class="tab-pane fade" id="bravo" role="tabpanel" aria-labelled-by="bravo-tab">Bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo.</div>
    <div class="tab-pane fade" id="charlie" role="tabpanel" aria-labelled-by="charlie-tab">Charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie.</div>
    <div class="tab-pane fade" id="delta" role="tabpanel" aria-labelled-by="delta-tab">Delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta.</div>
    <div class="tab-pane fade" id="epsilon" role="tabpanel" aria-labelled-by="epsilon-tab">Epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon.</div>
  </div>
  
  <p class="instructions">Compare pressing and holding "&gt;" (greater-than).</p>
</div>

Скрытие других вкладок на hidden.bs.tab, как предложено в документации , на самом деле не изменилосьлюбое нежелательное поведение. 

[…]
$pill.tab('show');

$pill.on('hidden.bs.tab', (ev) => {
    window.setTimeout(() => {
    //  (1) this doesn't work.
    //  $(ev.target).removeClass('active');

    //  (2) neither does this.
    //  $('.tab-pane').not($(ev.target).attr('href')).removeClass('active');
    //  $($(ev.relatedTarget).attr('href')).addClass('active');

    }, 1);
});

Или, может быть, я ошибся.Ребята, у вас есть идеи?Не могу найти тот вопрос, который был задан ранее.

...