叽叽喳喳的模式

引导选项卡我在Twitter的引导模式如下叽叽喳喳的模式

<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

来源

2013-05-29 user1144596

您可以编程方式显示一个标签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属性。

来源

2013-05-30 00:05:52 pickypg

叽叽喳喳的模式

回答

相关问题