0

私は次のように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>

最初のタブには動画のリストがあり、2 番目のタブにはプレーヤーがあります。

最初のリストのリストのボタンをクリックし、プログラムで2番目のタブを選択したい。

css を 2 番目のタブでアクティブに変更してこれを実行しようとしましたが、これを行うためのより良い方法があるかどうか疑問に思っていました。

さらに、ビデオの再生中に必要なのは、ユーザーが最初のタブをクリックすると、2 番目のタブのビデオの再生が停止することです。

これを達成する方法はありますか？

c#, asp.net, jQuery and bootstrap
4

1 に答える 1

1

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-30T00:05:52.807 に答える