Bootstrap-tab-plugin

提供：Dev Guides
移動先:案内、検索

ブートストラップ-タブプラグイン

次の章のリンクでタブが導入されました：/bootstrap/bootstrap_navigation_elements [ブートストラップナビゲーション要素]。 いくつかのデータ属性を組み合わせることにより、タブ付きインターフェイスを簡単に作成できます。 このプラグインを使用すると、ドロップダウンメニューを使用する場合でも、タブまたはピルのローカルコンテンツのペインを切り替えることができます。

'_このプラグイン機能を個別に含める場合は、 tab.js が必要です。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

使用法

次の2つの方法でタブを有効にできます-

  • データ属性*を介して-アンカーに *data-toggle = "tab" または data-toggle = "pill" を追加する必要があります。 + nav クラスと nav-tabs クラスをタブ ul に追加すると、Bootstrap link：/bootstrap/bootstrap_navigation_elements [tab styling]が適用され、 nav クラスと nav-pills クラスを追加するとリンクが適用されます：/bootstrap/bootstrap_navigation_elements [ピルスタイリング]。
<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>
  • Via JavaScript -以下のようにJavscriptを使用してタブを有効にできます-
$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})
  • 個々のタブをアクティブにするさまざまな方法の例を次に示します-
//Select tab by name
$('#myTab a[href = "#profile"]').tab('show')

//Select first tab
$('#myTab a:first').tab('show')

//Select last tab
$('#myTab a:last').tab('show')

//Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

フェード効果

タブのフェード効果を得るには、各 .tab-pane に .fade を追加します。 最初のタブペインには、初期コンテンツを適切にフェードインする .in も必要です- 

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

例

データ属性とフェード効果を使用したタブプラグインの例は、次の例に示すとおりです- 

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the OS X
         operating system used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>

</div>

方法

。$（）。tab *-このメソッドは、タブ要素とコンテンツコンテナーをアクティブにします。 タブには、DOMのコンテナノードをターゲットとする *data-target または href が必要です。 

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () {
      $('#myTab a:last').tab('show')
   })
</script>

例

次の例は、タブプラグインメソッド .tab の使用を示しています。 この例では、2番目のタブ_iOS_がアクティブになっています- 

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">

      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>

         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS,
         Web Logic etc.</p>
   </div>

</div>

<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

イベント

次の表に、タブプラグインで動作するイベントを示します。 このイベントを使用して、関数にフックすることができます。

Event Description Example
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target *and event.relatedTarget *to target the active tab and the previous active tab (if available) respectively. 
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target//activated tab
   e.relatedTarget//previous tab
})
shown.bs.tab This event fires on tab show after a tab has been shown. Use* event.target and event.relatedTarget* to target the active tab and the previous active tab (if available) respectively. 
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target//activated tab
   e.relatedTarget//previous tab
})

例

次の例は、タブプラグインイベントの使用を示しています。 ここの例では、現在および以前にアクセスしたタブを表示します- 

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>

         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
        //Get the name of active tab
         var activeTab = $(e.target).text();

        //Get the name of previous tab
         var previousTab = $(e.relatedTarget).text();

         $(".active-tab span")l(activeTab);
         $(".previous-tab span")l(previousTab);
      });
   });
</script>
「https://www.finddevguides.com/index.php?title=Bootstrap-tab-plugin&oldid=7348」から取得
Powered by MediaWiki