嘰嘰喳喳的模式

引導選項卡我在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

嘰嘰喳喳的模式

回答

相關問題