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	booleano, string	falso	Inclui um elemento de pano de fundo modal. Defina o pano de fundo como "static"se você não quiser que o modal seja fechado quando o pano de fundo for clicado.
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 = "static" > 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 ({
  teclado : verdadeiro 
})

.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 bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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 ( 'refresh' )

Demonstração

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

Este plugin oferece funcionalidade adicional para gerenciar o estado do botão.

Download

Usando bootstrap-buttons.js

$ ( '.tabs' ). botão ()

Métodos

$().button('toggle')

Alterna o estado de push. Dá a btn a aparência de que foi ativado.

Aviso Você pode ativar a alternância automática de um botão usando o data-toggleatributo.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('carregando')

Define o estado do botão para carregamento - desativa o botão e troca o texto para carregar o texto. O texto de carregamento deve ser definido no elemento botão usando o atributo data data-loading-text.

<button class = "btn" data-loading-text = "carregando coisas..." > ... </button>   

$().button('redefinir')

Redefine o estado do botão - troca o texto pelo texto original.

$().button(string)

Redefine o estado do botão - troca o texto para qualquer estado de texto definido por dados.

<button class = "btn" data-complete-text = "concluído!" > ... </button>   
<script>
  $('.btn').button('completo')
</script>

Demonstração

Carregando demonstração Alternar demonstração

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

Download

Usando bootstrap-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> 
</div>
 
<script>
  $ ( função () {  
    $ ( '.tabs' ). abas ()
  })
</script>

Eventos

Evento	Descrição
mudança	Este evento é acionado na alteração da guia. Use event.targete event.relatedTargetpara segmentar a guia ativa e a guia ativa anterior, respectivamente.

$ ( '#.guias' ). bind ( 'alterar' , function ( e ) {   
  e . alvo // aba ativada
  e . relatedTarget // aba anterior
})

Demonstração

• Casa
• Perfil
• Mensagens
• Definições
• Suspenso
  • @gordo
  • @mdo

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	corda, 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
modelo	corda	[marcação padrão]	O modelo html usado para renderizar um Twipsy.

Aviso As opções de instâncias individuais do twipsy podem ser especificadas alternativamente por meio do uso de atributos de dados.

<a href = "#" data-placement = "abaixo" rel = 'twipsy' title = 'Algum texto do título' > texto </a>    

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 bootstrap-twipsy.js , então certifique-se de pegar esse arquivo também ao incluir popovers em seu projeto!

Aviso Você deve incluir o arquivo bootstrap-twipsy.js antes de bootstrap-popover.js.

Download

Usando bootstrap-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	corda, função	'título'	atributo ou método para recuperar o texto do título
contente	corda, função	'conteúdo de dados'	uma string ou método para recuperar texto de conteúdo. se nenhum for fornecido, o conteúdo será originado de um atributo data-content.
acionar	corda	'flutuar'	como a dica de ferramenta é acionada - passe o mouse | foco | manual
modelo	corda	[marcação padrão]	O modelo html usado para renderizar um popover.

Aviso As opções de instâncias de popover individuais podem ser especificadas alternativamente por meio do uso de atributos de dados.

<a data-placement = "abaixo" href = "#" class = "btn perigo" rel = "popover" > texto </a>    

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.

Opções

Nome	modelo	predefinição	Descrição
seletor	corda	'.perto'	Qual seletor segmentar para fechar um alerta.

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