tab.js

• 使用例
• 使用方法
• メソッド
• イベント

使用例

ローカルのコンテンツのパネルを切り替え、ドロップダウンメニューもサポートする素早いダイナミックなタブ機能を追加します。 タブの入れ子はサポートされません。

タブナビゲーションを拡張
このプラグインは、タブのナビゲーションコンポーネントにタブ切り替え可能な領域を追加して拡張したものです。

使用方法

JavaScriptを通してタブ機能を有効にします。(それぞれ各タブを有効にする必要があります。)

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

それぞれのタブを様々な方法で有効にすることができます。

$('#myTabs a[href="#profile"]').tab('show') // 名前からタブを選択
$('#myTabs a:first').tab('show')            // 最初のタブを選択
$('#myTabs a:last').tab('show')             // 最後のタブを選択
$('#myTabs li:eq(2) a').tab('show')         // 3つ目のタブを選択(インデックスは0から開始)

マークアップ

JavaScriptを書かずに単にdata-toggle="tab"またはdata-toggle="pill"を要素に指定することで、 タブまたはピルのナビゲーションを有効にすることが可能です。 navとnav-tabsのクラスをそのタブのulに追加することでBootstrapのタブのスタイルが適用される一方で、 navとnav-pillsのクラスが追加されることでピルのスタイルが適用されます。

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

フェード効果

タブにフェードインの機能を入れるには、各.tab-paneに.fadeを追加します。 また、初回コンテンツに正しくフェードインさせるには、.inを持たせなければいけません。

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

メソッド

$().tab

タブの要素とコンテンツのコンテナを有効化します。 タブは、DOM内のコンテナを対象とするdata-targetまたはhrefを持つ必要があります。 上記の例では、タブはdata-toggle="tab"属性を持つ<a>となっています。

.tab('show')

指定されたタブを選択して、それに関連付けられているコンテンツを表示します。 その前に他のタブが選択されていれば、その選択は解除され、それに関連付けられているコンテンツは非表示になります。

$('#someTab').tab('show')

イベント

新しいタブが表示される際に、これらのイベントは下記の順で発火されます。

1. hide.bs.tab (現在有効になっているタブ)
2. show.bs.tab (これから表示するタブ)
3. hidden.bs.tab (直前に有効になっていたタブで、hide.bs.tab eventイベントと同じもの)
4. shown.bs.tab (新しく有効化され表示されたばかりのタブで、show.bs.tabイベントと同じもの)

事前にどのタブも有効になっていない場合は、hide.bs.tabとhidden.bs.tabのイベントは発火されません。

イベントの型	説明
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を使用して、 直前に有効だったタブと、新しく有効になったタブのそれぞれを対象にすることができます。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target        // 新しく有効になったタブ
  e.relatedTarget // 直前に有効だったタブ
})

 Back to top