Bootstrap Tabs Plugin

Cara membuat Bootstrap tabs plugin

Dengan menggabungkan beberapa atribut data, Anda dapat dengan mudah membuat layout tab. Dengan plugin ini Anda dapat transisi melalui panel kandungan lokal dalam tab atau pil, bahkan melalui menu dropdown. 
 

Jika Anda ingin menyertakan fungsi plugin ini secara individual, maka Anda akan perlu tab.js. Lain, seperti yang disebutkan dalam bab Ikhtisar Bootstrap Plugins, Anda dapat mencakup bootstrap.js atau bootstrap.min.js diminimalkan.

Dasar pembuatan tabs plugin bootstrap 

Dalam pembuatan tabs plugin Bootstrap, dasar-dasarnya adalah sebagai berikut :

• Dengan data atribute : Kita perlu menambahkan data-toggle="tab" atau data-toggle="pil" untuk anchor. Tambahkan class .nav dan class .nav-tabs di elemen <ul>.
  Contoh sebagai berikut :

  <ul class="nav nav-tabs">

  <li><a href="#identifier" data-toggle="tab"> Home </a> </li>

  ...

  </ul>

• Dengan Javascript : Kita dapat mengaktifkan tab dengan javascript , contohnya sebagai berkut :

  $('#myTab a').click(function (e) {

  e.preventDefault()
  $(this).tab('show')

  }).

Mengaktifkan tab individu

Berikut ini adalah contoh lain untuk mengaktifkan tab individu:

// 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')

Efek Fade pada tabs

Untuk mendapatkan efek fade di tab, tambahkan class .fade untuk setiap .tab-pane. Panel tab pertama, dan juga harus juga class .in untuk mendapatkan efek fade dalam konten awal:

<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>

Tab Plugin menggunakan atribut data dan efek fade yang ditampilkan dalam contoh berikut:

<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 technoligies and explains each of the technology with simple examples. You also have a <b>tryit</b> editor, wherein you can edit your code and try out different possibilities of the 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>