Застрял в понимании Bootstrap.v3 tab.js исходного кода

Question

фона

Недавно я планирую писать свой собственный Js LIB, которые в основном относятся к Bootstrap v3. Я застрял в каком-то коде, пожалуйста, помогите.

Проблема

В Bootstrap v3 tab.js, я понятия не имею, что эффект около двух сегментов ниже

Segment1:

// line 39 - 47 
var hideEvent = $.Event('hide.bs.tab', { 
    relatedTarget: $this[0] 
}) 
var showEvent = $.Event('show.bs.tab', { 
    relatedTarget: $previous[0] 
}) 

$previous.trigger(hideEvent) 
$this.trigger(showEvent) 

Segment2:

// line 55 - 62 
    $previous.trigger({ 
    type: 'hidden.bs.tab', 
    relatedTarget: $this[0] 
    }) 
    $this.trigger({ 
    type: 'shown.bs.tab', 
    relatedTarget: $previous[0] 
    }) 

Моих Попробуйте

1. Вывод одинарного tab.js в моем сценарии, и она работает, что означает две segmens выше, не полагаться на других виджеты/Util (ожидаюсь эффект перехода)
2. удаляет два сегмента в закладке .js, и он работает все еще. Я не знаю, какова цель этих двух сегментов?
3. Я рассматриваю jQ API: $ .Event & триггер, что я могу получить, это два сегмента, которые определяют некоторые пользовательские функции и триггер.

Помощь Какова цель этих двух сегментов? Большое спасибо.

Answer 1

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

Два указанных в вашем вопросе позволяют разработчику «зацепить» либо в "show" event or "hide" event. (На самом деле на самом деле еще 2 предоставлены бутстрапом [«показаны» и «скрыты»]). Из документации этих события запускаются, когда:

show.bs.tab
пожаров Этого события на закладку шоу, но до того, как новая вкладка была показана. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если доступно) соответственно.

shown.bs.tab
Это событие срабатывает при показе вкладок после показа вкладки. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если доступно) соответственно.

hide.bs.tab
пожары Этого события, когда новая вкладка должны быть указаны (и, таким образом, активная вкладка предыдущей должны быть скрыта). Используйте event.target и event.relatedTarget, чтобы настроить таргетинг на текущую активную вкладку и новую вкладку быстрого перехода.

hidden.bs.tab
Это событие срабатывает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Использовать событие.target и event.relatedTarget для таргетинга на предыдущую активную вкладку и новую активную вкладку, соответственно.

Примером того, как это можно использовать, может быть случай «Когда пользователь нажимает на вкладку, прекратите воспроизведение видео на YouTube, обновив его src». Код для чего-то подобного может быть

$('#myTabs').on('show.bs.tab', function(event){ 
    // previous tab 
    if(event.relatedTarget){ 
     var youtubeIframe = $(event.relatedTarget).find('iframe'); 
     var src = youtubeIframe.attr('src'); 
     youtubeIframe.attr('src', 'about:blank'); 
     youtubeIframe.attr('src', src); 
    } 
}); 

Кроме того, вы можете настроить таргетинг на вкладку, которая была просто «скрыта». Вместо того, чтобы смотреть на текущую вкладку и, используя его relatedTarget мы будем использовать hide.bs.tab событие и использовать event.target, например, так:

$('#myTabs').on('hide.bs.tab', function(event){ 
    // current tab 
    if(event.target){ 
     var youtubeIframe = $(event.target).find('iframe'); 
     var src = youtubeIframe.attr('src'); 
     youtubeIframe.attr('src', 'about:blank'); 
     youtubeIframe.attr('src', src); 
    } 
}); 

NB: Я уверен, что есть более эффективные способы, чтобы остановить воспроизведение видео Youtube. Это используется как пример кода.