Stuck in understanding Bootstrap.v3 tab.js source code

Question

Background

Recently I plan to write my own js lib which mainly refer to Bootstrap v3. I stuck in some code, please help.

Problem

In Bootstrap v3 tab.js, I have no idea what's the effect about two segments below

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]
  })

My Try

Withdraw the single tab.js in my script and it works, which means two segmens above not rely on other widget/util (expect the transition effect)
I delete two segments in tab.js and it works still. I have no idea what's the purpose of these two segments?
I review the jQ API: $.Event & trigger, what i can got is two segments define some custom function and trigger.

Help What's the purpose of these two segments? Thanks a lot.

If you removed them, and you see no change in the behavior, so they might be redundant? And you sure it's the right code for tab switch? — Nate Ben, Feb 20 '17 at 07:21
most likely the code creates and triggers the `hide/show.bs.tab` events — madalinivascu, Feb 20 '17 at 07:22
a good read will be https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events — madalinivascu, Feb 20 '17 at 07:23
@NateBen Removed and it can switch tabs. I don't agree with the redundant point. Some saying it is for some initialization. — Rocker Lau, Feb 20 '17 at 07:27
@madalinivascu Yes, but I have no idea what the hide/show.bs.tab did, and I can't see any detail about that in source code. Thanks the link by the way. — Rocker Lau, Feb 20 '17 at 07:29
hide/show.bs.tab are the events that add custom code to tabs, did you read the bootstrap documentation? — madalinivascu, Feb 20 '17 at 07:49
@madalinivascu Jesus Christ! I UNDERSTAND NOW. I WILL COMBIND THE DOCUMENT TO READ THE SOURCE CODE NEXT TIME! So it is just a hook for custom use. THANKS — Rocker Lau, Feb 20 '17 at 07:59

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Bootstrap has created a series of tools that it wants to make as extensible as possible. This means, that they want to allow the developer using their tools to "listen" to a number of "Events" and perform follow up actions.

The two listed in your question allow the developer to "hook" into either the "show" event or "hide" event. (There are actually 2 more provided by bootstrap ["shown" and "hidden"]). From the Documentation these events are fired when:

show.bs.tab
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

shown.bs.tab
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

hide.bs.tab
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.

hidden.bs.tab
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.

An example of how this might be used could be the case of "When the user clicks on a tab, stop playing the youtube video in the previous tab by refreshing its src". The code for something like this could be

$('#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);
    }
});

Alternatively, you could target the tab that was just "hidden". Rather than looking to the current tab and using its relatedTarget we would use the hide.bs.tab event and use event.target, like so:

$('#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: Im sure there are better ways to stop playing youtube videos. This is used as example code.

THANKS. So the source code above acts as hook to custom define, right? — Rocker Lau, Feb 20 '17 at 08:03
@RockerLau, it doesnt "change" what happens to the native bootstrap code.. the tabs will still change.. all this allows you to do is perform actions as a result of bootstrap changing things. I believe if you were looking to cancel a tab change you need to hook into the "click" event on the tab which fires before bootstrap's code, and stop the propogation ([See this answer](http://stackoverflow.com/a/32465794/648350)) — haxxxton, Feb 20 '17 at 08:06
Yes i got your point , maybe my explaination is poor but what i want to say is bootstrap offer a hook to users to do something during the tab switch circle. — Rocker Lau, Feb 20 '17 at 08:42
:) yep you got it. The hooks provide before during and after timing events :) — haxxxton, Feb 20 '17 at 13:35

Stuck in understanding Bootstrap.v3 tab.js source code

1 Answers1