tab bootstrap (Tab) widget

Tab (tab) di Bootstrap elemen navigasi diperkenalkan dalam bab ini. Dengan menggabungkan sejumlah atribut data, Anda dapat dengan mudah membuat antarmuka tab. Dengan plugin ini, Anda dapat menempatkan konten di tab atau tab kapsul dan bahkan drop down tab menu.

Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensitab.js.Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.

pemakaian

Anda dapat mengaktifkan tab dalam dua cara:

• Melalui atribut Data: Anda perlu menambahkan data-ubah = "tab"ataudata-ubah = "pil"untuk jangkar teks link.

  Nav nav-tabdan tambahkan kelas untukul,dan akan diterapkan Bootstrap gaya label , dan menambahkannavnav-pil untukulclass, dan akan diterapkan Bootstrap gaya kapsul .

  <Ul class = "nav nav-tab">
  	<Li> <a href="#identifier" data-toggle="tab"> Rumah </a> </ li>
  	...
  </ Ul>
  

• Dengan JavaScript: Anda dapat menggunakan tab untuk mengaktifkan javscript, sebagai berikut:

  $ ( '# MyTab a'). Klik (function (e) {
    e.preventDefault ()
    $ (Ini) .tab ( 'show')
  })
  

  Contoh berikut menunjukkan cara yang berbeda untuk mengaktifkan berbagai tab:

  // Pilih nama tab dengan $ ( '# myTab a [href = "# profil"]'). Tab ( 'show')
  
  // Pilih tab $ pertama ( '# myTab a: pertama') tab ( 'show').
  
  . // Pilih yang terakhir tab $ ( '# MyTab a: lalu) tab (' show ')
  
  // Pilih tab ketiga (zero-diindeks)
  $ ( '# MyTab li: eq (2) a') tab ( 'show').
  

efek Fade

Jika Anda perlu mengatur tab memudar efek, menambahkan.fade balik setiap .tab-pane.Tab pertama harus ditambahkan.in kelas memudar dalam konten asli, seperti yang ditunjukkan dalam contoh berikut:

<Class Div = "tab-content">
	<Div class = "tab-panel fade in aktif" id = "rumah"> ... </ div>
	<Class Div = "tab-panel fade" id = "svn"> ... </ div>
	<Class Div = "tab-panel fade" id = "ios"> ... </ div>
	<Class Div = "tab-panel fade" id = "java"> ... </ div>
</ Div>

contoh

Contoh berikut menunjukkan penggunaan tab data properti (Tab) dan plug-fade efek:

Hasilnya adalah sebagai berikut:

cara

<Ul class = "nav nav-tab" id = "myTab">
	<Class Li = "aktif"> <a href="#identifier" data-toggle="tab"> Rumah </a> </ li>
	.....
</ Ul>
<Class Div = "tab-content">
	<Class Div = "tab-panel aktif" id = "rumah"> ... </ div>
	.....
</ Div>
<Script>
	$ (Fungsi () {
		. $ ( '# MyTab a: lalu) tab (' show ')
	})
</ Script>

contoh

Contoh berikut menunjukkan tab (Tab) plug-in penggunaan metode.tab.Dalam contoh ini, tab kedua adalahiOS aktif:

Hasilnya adalah sebagai berikut:

peristiwa

Tabel berikut berisi daftar tab (Tab) plug-in untuk digunakan dalam acara tersebut. Peristiwa ini dapat digunakan ketika fungsi hook.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

contoh

Contoh berikut menunjukkan penggunaan tab (Tab) plug-in event. Dalam contoh ini, maka akan muncul tab mengunjungi sebelumnya arus dan:

Hasilnya adalah sebagai berikut: