Question

我在twitter bootstrap中有模态如下

 <div id="YouTubeDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
            <div class="modal-header">
                 <a href="#" class="btn btn-primary" onclick="okClicked();">Close</a>
            </div>
            <div class="modal-body">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li><a href="#VideoListTab" data-toggle="tab">Videos</a></li>
    <li><a href="#VideoPlayerTab" data-toggle="tab">Player</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="VideoListTab">
             <asp:GridView ID="VideoList" runat="server" AutoGenerateColumns="False" DataKeyNames="VideoID,VideoURL" OnRowDataBound="VideoList_RowDataBound" CssClass="table table-bordered">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Literal ID="VideoTitle" runat="server" />
                                <asp:HyperLink ID="ViewYouTubeLink" runat="server" CssClass="btn" Text="View"></asp:HyperLink>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView> 
    </div>
    <div class="tab-pane" id="VideoPlayerTab">
          <iframe id="youtubeiframe" />
        </div>
    </div>
    </div>
      </div>
            <div class="modal-footer">
             <a href="#" class="btn btn-primary" onclick="okClicked();">OK</a>
            </div>

在第一个标签上我有一个视频列表，在第二个标签上有播放器。

我想点击第一个列表中的列表按钮，然后以编程方式选择第二个选项卡。

我试图通过将css更改为第二个选项卡的活动来做到这一点，我想知道是否有更好的方法来做到这一点？

此外我需要的是在视频播放时，如果用户点击第一个标签，则第二个标签中的视频应该停止播放。

任何想法如何实现这一目标？

c#, asp.net, jQuery and bootstrap

Answer 1

您可以通过using Javascript以编程方式显示选项卡，以调用选项卡的链接。

$('a[href="#VideoPlayerTab"]').tab('show');

或者，您可以为链接指定id，或以您认为合适的其他方式引用该链接。

您可以收听每次显示新标签时触发的标签事件（'show'和'shown'）（包括您调用它时，如上所示）。

$('a[data-toggle="tab"]').on('shown', function (e) {
    var $previous = $(e.relatedTarget); // previous tab

    if ($previous.data("pause")) {
        var $pauseTab = $($previous.attr('href'));

        // pause video either by ID or by finding it in DOM
    }
});

'show'将在显示新选择的标签之前触发，因此上述事件会在实际显示其他标签之前暂停视频。在显示新选择的标签后，'shown'将触发。响应能力表明你可以在再次向他们展示内容之后暂停视频播放器。

注意：在上面的示例中，我使用名为'pause'的数据字段。这需要视频标签播放器链接的附加属性：data-pause="true"。您可以通过其他方式执行此操作，包括直接检查href属性。

模态中的twitter bootstrap选项卡

1 个答案: