guias de bootstrap (Tab) Widget

Tab (Tab) em elementos de navegação Bootstrap introduzidas no capítulo. Através da combinação de uma série de atributos de dados, você pode facilmente criar uma interface de guia. Com este plugin, você pode colocar o conteúdo em abas ou separadores de cápsula e até mesmo cair para baixo a guia do menu.

Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciatab.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.

uso

Você pode ativar as guias de duas maneiras:

• Através de atributos de dados: Você precisa adicionar dados-toggle = "tab"ouos dados-toggle = "pílula"para ancorar links de texto.

  Nav nav-guiase adicionar classe para oul,e será aplicada Bootstrap estilo de etiqueta , e adicionarnavnav-pílulas paraUlclasse, e será aplicada Bootstrap estilo cápsula .

  <ul class = "nav nav-tabs">
  	<Li> <a href="#identifier" data-toggle="tab"> Início </a> </ li>
  	...
  </ Ul>
  

• Por JavaScript: Você pode usar as guias para permitir Javscript, como segue:

  $ ( "# MyTab a '). Click (function (e) {
    e.preventDefault ()
    $ (Este) .tab ( 'show')
  })
  

  O exemplo a seguir demonstra maneiras diferentes para ativar as várias guias:

  // Selecione o nome da guia em US $ ( '# MyTab a [href = "# perfil"]'). Tab ( 'show')
  
  // Seleciona a primeira aba $ ( '# MyTab um: first') separador ( 'show').
  
  . // Seleciona a última guia $ ( '# MyTab a: última') separador ( 'show')
  
  // Seleciona o terceiro guia (zero-indexada)
  $ ( "# MyTab li: eq (2) a ') separador (' show ').
  

efeito de fade

Se você precisa definir guias desaparecer efeito, adicione.fade por trás de cada painel da .tab.A primeira guia tem de ser adicionado.in classe a desvanecer-se no conteúdo original, como mostrado nos exemplos seguintes:

<Div class = "tab-content">
	<Div class = "fade-painel guia na ativa" id = "casa"> ... </ div>
	<Div class = "-pane guia fade" id = "svn"> ... </ div>
	<Div class = "-pane guia fade" id = "ios"> ... </ div>
	<Div class = "-pane guia fade" id = "java"> ... </ div>
</ Div>

Exemplos

O exemplo a seguir demonstra o uso de guias de dados da propriedade (Tab) e plug-fade efeitos:

Os resultados são os seguintes:

caminho

<Ul class = "nav nav-tabs" id = "MyTab">
	<Li class = "ativo"> ​​<a href="#identifier" data-toggle="tab"> Início </a> </ li>
	.....
</ Ul>
<Div class = "tab-content">
	<Div class = "tab-painel ativo" id = "casa"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# MyTab a: última') separador ( 'show')
	})
</ Script>

Exemplos

O exemplo a seguir demonstra a guia (Tab) plug-in de uso métodos.tab.No presente exemplo, a segunda aba éiOS ativos:

Os resultados são os seguintes:

evento

A tabela a seguir lista as guias (guia) plug-in a ser utilizados no evento. Estes eventos podem ser usados ​​quando a função de gancho.

$('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 // 前一个激活的标签页
})

Exemplos

O exemplo seguinte demonstra a utilização de abas (aba) plug-in evento. No presente exemplo, ele irá mostrar a atual e as guias visitados anteriores:

Os resultados são os seguintes: