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)

分段2：

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

我的尝试

在我的脚本中提取单个tab.js并且它有效，这意味着上面的两个segmens不依赖于其他widget / util（期望转换效果）
我在tab.js中删除了两个段，但它仍然有效。我不知道这两个部分的目的是什么？
我查看了jQ API：$ .Event＆amp;触发器，我能得到的是两个段定义一些自定义函数和触发器。

帮助这两个细分市场的目的是什么？非常感谢。

Answer 1

Bootstrap创建了一系列希望尽可能扩展的工具。这意味着，他们希望允许开发人员使用他们的工具来聆听＆＃34;一些＆＃34;事件＆＃34;并执行后续行动。

您问题中列出的两个允许开发人员＆＃34; hook＆＃34;进入"show" event or "hide" event。（实际上还有2个由bootstrap提供[＆＃34;显示＆＃34;＆＃34;隐藏＆＃34;]）。从文档中可以看出这些事件：

show.bs.tab
此事件在标签显示时触发，但在显示新标签之前触发。使用event.target和event.relatedTarget分别定位活动标签和上一个活动标签（如果有）。

shown.bs.tab
在显示标签后，此标签会在标签显示中触发。使用event.target和event.relatedTarget分别定位活动标签和上一个活动标签（如果有）。

hide.bs.tab
当要显示新标签时会触发此事件（因此将隐藏上一个活动标签）。使用event.target和event.relatedTarget分别定位当前活动标签和新即将生效的标签。

hidden.bs.tab
在显示新标签后触发此事件（因此隐藏了上一个活动标签）。使用event.target和event.relatedTarget分别定位上一个活动选项卡和新的活动选项卡。

如何使用它的示例可以是＆＃34;当用户点击标签时，通过刷新其src＆＃34;停止播放上一个标签中的youtube视频。这样的代码可以是

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

或者，您可以定位仅隐藏＆＃34;的标签。我们不会查看当前标签并使用其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);
    }
});

注意：我确定有更好的方法可以停止播放YouTube视频。这用作示例代码。

坚持理解Bootstrap.v3 tab.js源代码

1 个答案: