Nosso plug-in Modal é uma versão super fina do plug-in modal js tradicional, tendo um cuidado especial para incluir apenas a funcionalidade básica que exigimos aqui no twitter.

Download

Usando bootstrap-modal

$ ( '#meu-modal' ). modal ( opções )

Opções

Nome	modelo	predefinição	Descrição
pano de fundo	boleano	falso	Inclui um elemento de pano de fundo modal
teclado	boleano	falso	Fecha o modal quando a tecla Escape é pressionada
mostrar	boleano	falso	Abre o modal na inicialização da classe

Marcação

Você pode ativar modais em sua página facilmente sem ter que escrever uma única linha de javascript. Basta dar a um elemento um data-controls-modalatributo que corresponda a um id de elemento modal e, quando clicado, ele iniciará seu modal. Para adicionar opções modais, basta incluí-las também como atributos de dados.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Iniciar Modal </a>    

Aviso Se você quiser que seu modal seja animado para dentro e para fora, basta adicionar uma .fadeclasse ao seu .modalelemento (consulte a demonstração para ver isso em ação).

Métodos

.modal(opções)

Ativa seu conteúdo como um modal. Aceita opções opcionais object.

$ ( '#meu-modal' ). modal ({
  closeOnEscape : true 
})

.modal('toggle')

Alterna manualmente um modal.

$ ( '#meu-modal' ). modal ( 'alternar' )

.modal('mostrar')

Abre manualmente um modal.

$ ( '#meu-modal' ). modal ( 'mostrar' )

.modal('ocultar')

Oculta manualmente um modal.

$ ( '#meu-modal' ). modal ( 'esconder' )

.modal(true)

Retorna uma instância de classe modal de elementos.

$ ( '#meu-modal' ). modal ( verdadeiro )

Aviso Alternativamente, isso pode ser recuperado com $().data('modal').

Eventos

A classe modal do Bootstrap expõe alguns eventos para conexão com a funcionalidade modal.

Evento	Descrição
mostrar	Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrando	Este evento é acionado quando o modal se torna visível para o usuário (aguardará a conclusão das transições css).
ocultar	Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
escondido	Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições css).

$ ( '#meu-modal' ). bind ( 'oculto' , function () {   
  // faça alguma coisa ...
})

Demonstração

Modo de lançamento

Este plug-in é para adicionar interação suspensa à barra superior de bootstrap ou às navegações com guias.

Download

Usando boostrap-dropdown.js

$ ( '#topbar' ). lista suspensa ()

Marcação

Para adicionar rapidamente a funcionalidade suspensa a qualquer elemento de navegação, use o data-dropdownatributo. Qualquer menu suspenso de bootstrap válido será ativado automaticamente.

<ul class = "abas" > 
  <li class = "ativo" ><a href = "#" > Página inicial </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Lista suspensa </a>  
    <ul class = "menu suspenso" > 
      <li><a href = "#" > Link secundário </a></li> 
      <li><a href = "#" > Outra coisa aqui </a></li> 
      <li class = "divisor" ></li> 
      <li><a href = "#" > Outro link </a></li> 
    </ul>
  </li>
</ul>

Aviso Se sua interface do usuário tiver vários menus suspensos, considere adicionar o data-dropdownatributo a um elemento de contêiner mais significativo, como .tabsou .topbar.

Métodos

$().dropdown()

Uma API programática para ativar menus para uma determinada barra superior ou navegação com guias.

Demonstração

Este plugin é para adicionar a interação scrollspy (nav de atualização automática) à barra superior do bootstrap.

Download

Usando boostrap-scrollspy.js

$ ( '#topbar' ). lista suspensa ()

Marcação

Para adicionar facilmente o comportamento do scrollspy à sua navegação, basta adicionar o data-scrollspyatributo ao arquivo .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Métodos

$().scrollspy()

Auto ativa os botões de navegação pela posição de rolagem dos usuários.

$ ( 'corpo > .topbar' ). scrollSpy ()

Observe que as tags de âncora da barra superior devem ter destinos de ID que podem ser resolvidos. Por exemplo, a <a href="#home">home</a>deve corresponder a algo no dom como <div id="home"></div>.

.scrollspy('atualizar')

O scrollspy armazena em cache os botões de navegação e as coordenadas da seção para desempenho. Se você precisar atualizar esse cache (provavelmente se tiver conteúdo dinâmico), basta chamar esse método de atualização. Se você usou o atributo data para definir seu scrollspy, basta chamar refresh no corpo.

$ ( 'corpo' ). scrollspy ( 'atualizar' )

Demonstração

Confira a navegação da barra superior nesta página.

Este plugin adiciona a funcionalidade de tabulação e pílula rápida e dinâmica.

Download

Usando boostrap-tabs.js

$ ( '.tabs' ). abas ()

Marcação

Você pode ativar uma navegação por guias ou pílulas sem escrever nenhum javascript, simplesmente dando a eles um atributo data-tabsou .data-pills

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Métodos

$().tabs ou $().pills

Ativa a funcionalidade de guia e pílula para um determinado recipiente. Os links das guias devem fazer referência aos ids no documento.

<ul class = "abas" > 
  <li class = "ativo" ><a href = "#home" > Página inicial </a></li>  
  <li><a href = "#profile" > Perfil </a></li> 
  <li><a href = "#messages" > Mensagens </a></li> 
  <li><a href = "#settings" > Configurações </a></li> 
</ul>
 
<div class = "conteúdo da pílula" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "perfil" > ... </div> 
  <div id = "mensagens" > ... </div> 
  <div id = "configurações" > ... </div> 
</ul>
 
<script>
  $ ( função () {  
    $ ( '.tabs' ). abas ()
  })
</script>

Demonstração

• Casa
• Perfil
• Mensagens
• Definições

Baseado no excelente plugin jQuery.tipsy escrito por Jason Frame; Twipsy é uma versão atualizada, que não depende de imagens, usa css3 para animações e atributos de dados para armazenamento de títulos!

Download

Usando bootstrap-twipsy.js

$ ( '#exemplo' ). Twipsy ( opções )

Opções

Nome	modelo	predefinição	Descrição
animar	boleano	verdadeiro	aplique uma transição de fade css à dica de ferramenta
delayIn	número	0	atraso antes de mostrar a dica de ferramenta (ms)
delayOut	número	0	atraso antes de ocultar a dica de ferramenta (ms)
cair pra trás	corda	''	texto a ser usado quando nenhum título de dica de ferramenta estiver presente
colocação	corda	'acima de'	como posicionar a dica de ferramenta - acima | abaixo | esquerda | certo
html	boleano	falso	permite conteúdo html na dica de ferramenta
viver	boleano	falso	use delegação de eventos em vez de manipuladores de eventos individuais
Deslocamento	número	0	deslocamento de pixel da dica de ferramenta do elemento de destino
título	seqüência | função	'título'	atributo ou método para recuperar o texto do título
acionar	corda	'flutuar'	como a dica de ferramenta é acionada - passe o mouse | foco | manual

Métodos

$().twipsy(opções)

Anexa um manipulador Twipsy a uma coleção de elementos.

.twipsy('mostrar')

Revela um elemento twipsy.

$ ( '#elemento' ). Twipsy ( 'show' )

.twipsy('esconder')

Esconde um elemento Twipsy.

$ ( '#elemento' ). Twipsy ( 'esconder' )

.twipsy(true)

Retorna uma instância de classe de elementos Twipsy.

$ ( '#elemento' ). Twipsy ( verdadeiro )

Aviso Alternativamente, isso pode ser recuperado com $().data('twipsy').

Demonstração

O plugin popover fornece uma interface simples para adicionar popovers ao seu aplicativo. Ele estende o plugin boostrap-twipsy.js , então certifique-se de pegar esse arquivo também ao incluir popovers em seu projeto!

Download

Usando boostrap-popover.js

$ ( '#exemplo' ). popover ( opções )

Opções

Nome	modelo	predefinição	Descrição
animar	boleano	verdadeiro	aplique uma transição de fade css à dica de ferramenta
delayIn	número	0	atraso antes de mostrar a dica de ferramenta (ms)
delayOut	número	0	atraso antes de ocultar a dica de ferramenta (ms)
cair pra trás	corda	''	texto a ser usado quando nenhum título de dica de ferramenta estiver presente
colocação	corda	'certo'	como posicionar a dica de ferramenta - acima | abaixo | esquerda | certo
html	boleano	falso	permite conteúdo html na dica de ferramenta
viver	boleano	falso	use delegação de eventos em vez de manipuladores de eventos individuais
Deslocamento	número	0	deslocamento de pixel da dica de ferramenta do elemento de destino
título	seqüência | função	'título'	atributo ou método para recuperar o texto do título
contente	seqüência | função	'conteúdo de dados'	atributo ou método para recuperar o texto do conteúdo
acionar	corda	'flutuar'	como a dica de ferramenta é acionada - passe o mouse | foco | manual

Métodos

$().popover(opções)

Inicializa popovers para uma coleção de elementos.

.popover('mostrar')

Revela um popover de elementos.

$ ( '#elemento' ). popover ( 'mostrar' )

.popover('ocultar')

Oculta um popover de elementos.

$ ( '#elemento' ). popover ( 'esconder' )

Demonstração

passe o mouse para popover

O plugin de alerta é uma classe super pequena para adicionar funcionalidade próxima aos alertas.

Download

Usando bootstrap-alerts.js

$ ( ".mensagem de alerta" ). alerta ()

Marcação

Basta adicionar um data-alertatributo às suas mensagens de alerta para fornecer automaticamente uma funcionalidade próxima.

Métodos

$().alert()

Envolve todos os alertas com funcionalidade de fechamento. Para que seus alertas sejam animados quando fechados, certifique-se de que eles já tenham a classe .fadee .inaplicada a eles.

.alert('fechar')

Fecha um alerta.

$ ( ".mensagem de alerta" ). alerta ( 'perto' )

Demonstração