Javascript para Bootstrap

Da vida aos compoñentes de Bootstrap, agora con 12 complementos jQuery personalizados.

Modais

Unha versión simplificada, pero flexible, do complemento modal de javascript tradicional con só a funcionalidade mínima necesaria e os valores predeterminados intelixentes.

Despregables

Engade menús despregables a case calquera cousa en Bootstrap con este sinxelo complemento. Bootstrap presenta compatibilidade completa do menú despregable na barra de navegación, as pestanas e as pílulas.

Scrollspy

Use scrollspy para actualizar automaticamente as ligazóns na súa barra de navegación para mostrar a ligazón activa actual en función da posición do desprazamento.

Pestanas alternables

Use este complemento para facer que as pestanas e as pílulas sexan máis útiles, permitíndolles alternar entre os paneis de contido local con pestanas.

Suxestións sobre ferramentas

Unha nova versión do complemento jQuery Tipsy, as informacións sobre ferramentas non dependen das imaxes; usan CSS3 para animacións e atributos de datos para o almacenamento local de títulos.

Popovers *

Engade pequenas superposicións de contido, como as do iPad, a calquera elemento para albergar información secundaria.

* Require que se inclúan consellos sobre ferramentas

Mensaxes de alerta

O complemento de alerta é unha pequena clase para engadir unha funcionalidade próxima ás alertas.

Botóns

Fai máis cos botóns. Controla os estados dos botóns ou crea grupos de botóns para máis compoñentes como barras de ferramentas.

Colapsar

Obtén estilos básicos e soporte flexible para compoñentes plegables como acordeóns e navegación.

Carrusel

Crea un carrusel de calquera contido que desexes para ofrecer unha presentación interactiva de contido.

Teclea diante

Un complemento básico e facilmente estendido para crear rapidamente tipografías elegantes con calquera entrada de texto do formulario.

Transicións *

Para efectos de transición sinxelos, inclúe bootstrap-transition.js unha vez para introducir as alertas modais ou desaparecer.

* Necesario para a animación en complementos

Aviso! Todos os complementos de javascript requiren a última versión de jQuery.

Sobre os modais

Unha versión simplificada, pero flexible, do complemento modal de javascript tradicional con só a funcionalidade mínima necesaria e os valores predeterminados intelixentes.

Descargar ficheiro

Exemplo estático

A continuación móstrase un modal renderizado de forma estática.

Demo en directo

Alterna un modal mediante javascript facendo clic no botón de abaixo. Deslizarase cara abaixo e desaparecerá dende a parte superior da páxina.

Iniciar modal de demostración

Usando bootstrap-modal

Chame ao modal a través de javascript:

  1. $ ( '#myModal' ). modal ( opcións )

Opcións

Nome tipo por defecto descrición
pano de fondo booleano verdade Inclúe un elemento de fondo modal. Alternativamente, especifique staticun fondo que non peche o modal ao facer clic.
teclado booleano verdade Pecha o modal cando se preme a tecla Esc
mostrar booleano verdade Mostra o modal cando se inicializa.

Marcado

Podes activar os modais na túa páxina facilmente sen ter que escribir unha soa liña de javascript. Só ten que configurar data-toggle="modal"un elemento de controlador cun data-target="#foo"ou href="#foo"que corresponda a un identificador de elemento modal e, cando se faga clic, iniciará o seu modal.

Ademais, para engadir opcións á túa instancia modal, só tes que incluílas como atributos de datos adicionais tanto no elemento de control como no propio marcado modal.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "encabezado-modal" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Cabeceira modal </h3>
  5. </div>
  6. <div class = "corpo-modal" >
  7. <p> Un bo corpo... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Pechar </a>
  11. <a href = "#" class = "btn btn-primary" > Gardar cambios </a>
  12. </div>
  13. </div>
Aviso! Se queres que o teu modal se anime dentro e fóra, só tes que engadir unha .fadeclase ao .modalelemento (consulta a demostración para ver isto en acción) e inclúe bootstrap-transition.js.

Métodos

.modal(opcións)

Activa o teu contido como modal. Acepta opcións opcionais object.

  1. $ ( '#myModal' ). modal ({
  2. teclado : falso
  3. })

.modal('alternar')

Alterna manualmente un modal.

  1. $ ( '#myModal' ). modal ( 'alternar' )

.modal('mostrar')

Abre manualmente un modal.

  1. $ ( '#myModal' ). modal ( 'mostrar' )

.modal('ocultar')

Oculta manualmente un modal.

  1. $ ( '#myModal' ). modal ( 'ocultar' )

Eventos

A clase modal de Bootstrap expón algúns eventos para conectarse á funcionalidade modal.

Evento Descrición
mostrar Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado Este evento desenvólvese cando o modal se fixo visible para o usuario (esperará a que se completen as transicións css).
ocultar Este evento desenvólvese inmediatamente cando hidese chamou ao método de instancia.
agochado Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións css).
  1. $ ( '#myModal' ). on ( 'oculto' , función () {
  2. // facer algo…
  3. })

O complemento ScrollSpy serve para actualizar automaticamente os obxectivos de navegación en función da posición do desprazamento.

Descargar ficheiro

Exemplo de barra de navegación con scrollspy

Desprázate pola área de abaixo e mira a actualización da navegación. Tamén se destacarán os subelementos do menú despregable. Próbao!

@graxas

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de que esgotasen qui. Dereitos das bicicletas Tumblr da granxa á mesa. Anim keffiyeh carles cardigan. Fotomatón de Velit seitan mcsweeney 3 wolf moon irure. Suéter Cosby pantalóns curtos de vaquero lomo, sudadera con capucha williamsburg mínimo que probablemente non escoitou falar deles e cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuado acusamus, cred ironía biodiesel keffiyeh artesán ullamco consequat.

@mdo

Monopatín con bigote Veniam marfa, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camión de comida con camisola cosby tatuada, vinilo non freegan de mcsweeney. Lo-fi wes anderson +1 sartorial. Carles non exercicio estético quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

un

Occaecat commodo aliqua delectus. Fap cervexa artesanal deserunt monopatín ea. Os dereitos das bicicletas Lomo adipisicing banh mi, velit ea are next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS é adipisicing. Consectetur nisi DIY bolsa de mensaxería mínima. Cred ex in, delectus sustentable consectetur fanny pack iphone.

dous

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliché ironía, thundercats probablemente non escoitou falar deles consequat hoodie sen glute lo-fi fap aliquip. Traballe antes de que se esgotasen, terry richardson proident brunch non deixa de ter un suéter cosby e tamén un artesán helvético. Cardigan cervexa artesanal seitán readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Usando bootstrap-scrollspy.js

Chame ao scrollspy a través de javascript:

  1. $ ( '#navbar' ). scrollspy ()

Marcado

Para engadir facilmente o comportamento scrollspy á túa navegación da barra superior, só tes que engadir data-spy="scroll"ao elemento que queres espiar (normalmente este sería o corpo).

  1. <body data-spy = "scroll" > ... </body>
Aviso! As ligazóns da barra de navegación deben ter obxectivos de identificación resolubles. Por exemplo, un <a href="#home">home</a>debe corresponder a algo no dom como <div id="home"></div>.

Métodos

.scrollspy('actualizar')

Ao usar scrollspy xunto coa engade ou eliminación de elementos do DOM, terás que chamar ao método de actualización deste xeito:

  1. $ ( '[data-spy="scroll"]' ). cada ( función () {
  2. var $spy = $ ( isto ). scrollspy ( 'actualizar' )
  3. });

Opcións

Nome tipo por defecto descrición
compensar número 10 Píxeles para compensar desde arriba ao calcular a posición do desprazamento.

Eventos

Evento Descrición
activar Este evento desenvólvese sempre que o scrollspy activa un novo elemento.

Este complemento engade funcións de pestanas e pílulas rápidas e dinámicas para a transición a través do contido local.

Descargar ficheiro

Exemplos de pestanas

Fai clic nas pestanas de abaixo para alternar entre os paneis ocultos, mesmo a través dos menús despregables.

Denim cru que probablemente non escoitou falar deles shorts de jeans Austin. Nesciunt tofu stumptown aliqua, sintetizador retro cleanse. Bigote cliché tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Usando bootstrap-tab.js

Activa as pestanas con tabulacións mediante javascript (cada pestana debe activarse individualmente):

  1. $ ( '#myTab a' ). prema ( función ( e ) {
  2. e . preventDefault ();
  3. $ ( este ). pestana ( 'mostrar' );
  4. })

Podes activar pestanas individuais de varias maneiras:

  1. $ ( '#myTab a[href="#profile"]' ). pestana ( 'mostrar' ); // Selecciona a pestana polo nome
  2. $ ( '#myTab a:first' ). pestana ( 'mostrar' ); // Selecciona a primeira pestana
  3. $ ( '#myTab a:last' ). pestana ( 'mostrar' ); // Selecciona a última pestana
  4. $ ( '#myTab li:eq(2) a' ). pestana ( 'mostrar' ); // Selecciona a terceira pestana (indexada 0)

Marcado

Podes activar unha navegación por pestanas ou pílulas sen escribir ningún javascript simplemente especificando data-toggle="tab"ou data-toggle="pill"nun elemento. Engadindo as clases nave nav-tabsá pestana ulaplicarase o estilo da pestana de arranque.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Inicio </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mensaxes </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Configuración </a></li>
  6. </ul>

Métodos

$().tab

Activa un elemento de pestana e un contenedor de contido. A pestana debería ter un nodo de contedores data-targetou un hrefnodo de destino no DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Inicio </a></li>
  3. <li><a href = "#profile" > Perfil </a></li>
  4. <li><a href = "#messages" > Mensaxes </a></li>
  5. <li><a href = "#settings" > Configuración </a></li>
  6. </ul>
  7.  
  8. <div class = "contido da pestana" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "perfil" > ... </div>
  11. <div class = "tab-pane" id = "mensaxes" > ... </div>
  12. <div class = "tab-pane" id = "configuración" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( función () {
  17. $ ( '#myTab a:last' ). pestana ( 'mostrar' );
  18. })
  19. </script>

Eventos

Evento Descrición
mostrar Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
mostrado Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'mostrado' , función ( e ) {
  2. e . destino // pestana activada
  3. e . relatedTarget // pestana anterior
  4. })

Acerca de Tooltips

Inspirado no excelente complemento jQuery.tipsy escrito por Jason Frame; As informacións sobre ferramentas son unha versión actualizada, que non depende de imaxes, usa css3 para animacións e atributos de datos para o almacenamento local de títulos.

Descargar ficheiro

Exemplo de uso de Tooltips

Pasa o cursor polas seguintes ligazóns para ver consellos:

Pantalóns axustados seguinte nivel keffiyeh probablemente non escoitou falar deles. Fotomatón barba denim crudo tipografía bolsa de mensajería vegana stumptown. Seitan da granxa á mesa, o fixie de quinoa sustentable de mcsweeney de 8 bits American Apparel teñen un cambray de vinilo terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artesán realmente irónico calquera que sexa keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim café de orixe única viral.


Usando bootstrap-tooltip.js

Activa a información sobre ferramentas mediante javascript:

  1. $ ( '#exemplo' ). información sobre ferramentas ( opcións )

Opcións

Nome tipo por defecto descrición
animación booleano verdade aplique unha transición de fundido css á información sobre ferramentas
colocación cadea|función 'arriba' como colocar a información sobre ferramentas - arriba | inferior | esquerda | certo
selector corda falso Se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados.
título cadea | función '' valor de título predeterminado se a etiqueta `title` non está presente
disparador corda 'pasar' como se activa a información sobre ferramentas - pasar o rato | foco | manual
atraso número | obxecto 0

atrasar a mostra e ocultar a información sobre ferramentas (ms): non se aplica ao tipo de disparador manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { show: 500, hide: 100 }

Aviso! Alternativamente, pódense especificar opcións para consellos individuais mediante o uso de atributos de datos.

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos popover están activadas. Se queres usalas, só tes que especificar unha opción de selección.

  1. <a href = "#" rel = "tooltip" title = "primeira información sobre ferramentas" > pasa o rato sobre min </a>

Métodos

$().información sobre ferramenta(opcións)

Anexa un controlador de información sobre ferramentas a unha colección de elementos.

.tooltip('mostrar')

Revela a información sobre ferramentas dun elemento.

  1. $ ( '#elemento' ). información sobre ferramentas ( 'mostrar' )

.tooltip('ocultar')

Oculta a información sobre ferramentas dun elemento.

  1. $ ( '#elemento' ). información sobre ferramentas ( 'ocultar' )

.tooltip('alternar')

Alterna a información sobre ferramentas dun elemento.

  1. $ ( '#elemento' ). información sobre ferramentas ( 'alternar' )

Sobre popovers

Engade pequenas superposicións de contido, como as do iPad, a calquera elemento para albergar información secundaria.

* Require que se inclúa a información sobre ferramentas

Descargar ficheiro

Exemplo de popover do rato

Pasa o rato sobre o botón para activar o popover.


Usando bootstrap-popover.js

Activar popovers mediante javascript:

  1. $ ( '#exemplo' ). popover ( opcións )

Opcións

Nome tipo por defecto descrición
animación booleano verdade aplique unha transición de fundido css á información sobre ferramentas
colocación cadea|función 'correcto' como colocar o popover - arriba | inferior | esquerda | certo
selector corda falso se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados
disparador corda 'pasar' como se activa a información sobre ferramentas - pasar o rato | foco | manual
título cadea | función '' valor de título predeterminado se o atributo `title` non está presente
contido cadea | función '' valor de contido predeterminado se o atributo `data-content` non está presente
atraso número | obxecto 0

atraso para mostrar e ocultar o popover (ms): non se aplica ao tipo de activación manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { show: 500, hide: 100 }

Aviso! Opcións para popovers individuais pódense especificar alternativamente mediante o uso de atributos de datos.

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos popover están activadas. Se queres usalas, só tes que especificar unha opción de selección.

Métodos

$().popover(opcións)

Inicia os popovers para unha colección de elementos.

.popover('mostrar')

Revela un popover de elementos.

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

.popover('ocultar')

Oculta un popover de elementos.

  1. $ ( '#elemento' ). popover ( 'ocultar' )

.popover('alternar')

Alterna un popover de elementos.

  1. $ ( '#elemento' ). popover ( 'alternar' )

Sobre as alertas

O complemento de alerta é unha pequena clase para engadir unha funcionalidade próxima ás alertas.

Descargar

Alertas de exemplo

O complemento de alertas funciona en mensaxes de alerta regulares e bloquea mensaxes.

Santo guacamole! É mellor que te comprobes, non tes demasiado bo aspecto.

¡Oh! Tes un erro!

Cambia isto e outro e téntao de novo. Duis mollis, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tome esta acción Ou fai isto


Usando bootstrap-alert.js

Activar a eliminación dunha alerta mediante javascript:

  1. $ ( ".alerta" ). alerta ()

Marcado

Só tes que engadir data-dismiss="alert"ao teu botón de peche para dar automaticamente unha función de peche de alerta.

  1. <a class = "close" data-dismiss = "alerta" href = "#" > × </a>

Métodos

$().alerta()

Envolve todas as alertas cunha funcionalidade próxima. Para que as túas alertas se animen cando estean pechadas, asegúrate de que xa teñan a clase .fadee aplicada..in

.alert('pechar')

Pecha unha alerta.

  1. $ ( ".alerta" ). alerta ( 'pechar' )

Eventos

A clase de alerta de Bootstrap expón algúns eventos para conectarse á funcionalidade de alerta.

Evento Descrición
pechar Este evento desenvólvese inmediatamente cando closese chama ao método de instancia.
pechado Este evento desenvólvese cando se pechou a alerta (esperará a que se completen as transicións css).
  1. $ ( '#a miña-alerta' ). ligar ( 'pechado' , función () {
  2. // facer algo…
  3. })

Sobre

Fai máis cos botóns. Controla os estados dos botóns ou crea grupos de botóns para máis compoñentes como barras de ferramentas.

Descargar ficheiro

Exemplos de usos

Use o complemento de botóns para os estados e os alternadores.

Estado
Conmutador único
Caixa de verificación
Radio

Usando bootstrap-button.js

Activar botóns mediante javascript:

  1. $ ( '.nav-tabs' ). botón ()

Marcado

Os atributos de datos son integrantes do complemento do botón. Consulte o código de exemplo a continuación para os distintos tipos de marcado.

  1. <!-- Engade data-toggle="button" para activar a alternancia nun só botón -->
  2. <button class = "btn" data-toggle = "button" > Alternancia única </button>
  3.  
  4. <!-- Engadir data-toggle="buttons-checkbox" para alternar o estilo da caixa de verificación en btn-group -->
  5. <div class = "btn-group" data-toggle = "botóns-caixa de verificación" >
  6. <button class = "btn" > Esquerda </button>
  7. <button class = "btn" > Medio </button>
  8. <button class = "btn" > Dereita </button>
  9. </div>
  10.  
  11. <!-- Engadir data-toggle="buttons-radio" para alternar o estilo de radio en btn-group -->
  12. <div class = "btn-group" data-toggle = "botóns-radio" >
  13. <button class = "btn" > Esquerda </button>
  14. <button class = "btn" > Medio </button>
  15. <button class = "btn" > Dereita </button>
  16. </div>

Métodos

$().button('alternar')

Alterna o estado push. Dálle ao botón a aparencia de que foi activado.

Aviso! Podes activar a alternancia automática dun botón usando o data-toggleatributo.
  1. <button class = "btn" data-toggle = "botón" > </button>

$().button('cargando')

Establece o estado do botón para cargar: desactiva o botón e cambia o texto polo texto de carga. O texto de carga debe definirse no elemento botón mediante o atributo data data-loading-text.

  1. <button class = "btn" data-loading-text = "cargando cousas..." > ... </button>
Aviso! Firefox mantén o estado desactivado nas cargas de páxinas . Unha solución para isto é usar autocomplete="off".

$().button('restablecer')

Restablece o estado do botón: cambia o texto polo texto orixinal.

$().button(cadea)

Restablece o estado do botón: cambia o texto por calquera estado de texto definido por datos.

  1. <button class = "btn" data-complete-text = "acabado!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). botón ( 'completo' )
  4. </script>

Sobre

Obtén estilos básicos e soporte flexible para compoñentes plegables como acordeóns e navegación.

Descargar ficheiro

* Require que se inclúa o complemento Transitions.

Exemplo de acordeón

Usando o complemento de contraer, creamos un widget sinxelo de estilo acordeón:

Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.

Usando bootstrap-collapse.js

Activar mediante javascript:

  1. $ ( ".colapso" ). colapsar ()

Opcións

Nome tipo por defecto descrición
pai selector falso Se se selecciona, pecharanse todos os elementos contraíbles baixo o pai especificado cando se mostre este elemento contraíble. (semellante ao comportamento tradicional do acordeón)
alternar booleano verdade Alterna o elemento contraíble na invocación

Marcado

Só ten que engadir data-toggle="collapse"e un data-targetelemento para asignar automaticamente o control dun elemento plegable. O data-targetatributo acepta un selector css ao que aplicar o colapso. Asegúrate de engadir a clase collapseao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional in.

  1. <button class = "btn btn-danger" data-toggle = "contraer" data-target = "#demo" >
  2. simple plegable
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Aviso! Para engadir unha xestión de grupos de tipo acordeón a un control plegable, engade o atributo de datos data-parent="#selector". Consulta a demostración para ver isto en acción.

Métodos

.collapse(opcións)

Activa o teu contido como elemento plegable. Acepta opcións opcionais object.

  1. $ ( '#myCollapsible' ). contraer ({
  2. alternar : falso
  3. })

.collapse('alternar')

Alterna un elemento plegable para mostrar ou ocultar.

.collapse('mostrar')

Mostra un elemento plegable.

.collapse('ocultar')

Oculta un elemento plegable.

Eventos

A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.

Evento Descrición
mostrar Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado Este evento desenvólvese cando un elemento de contraer se fixo visible para o usuario (esperará a que se completen as transicións css).
ocultar Este evento desenvólvese inmediatamente cando hidese chamou ao método.
agochado Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións css).
  1. $ ( '#myCollapsible' ). on ( 'oculto' , función () {
  2. // facer algo…
  3. })

Sobre

Un complemento básico e facilmente estendido para crear rapidamente tipografías elegantes con calquera entrada de texto do formulario.

Descargar ficheiro

Exemplo

Comeza a escribir no campo de abaixo para mostrar os resultados de teclear.


Usando bootstrap-typeahead.js

Chame ao typeahead mediante javascript:

  1. $ ( '.typeahead' ). teclear ()

Opcións

Nome tipo por defecto descrición
fonte matriz [ ] A fonte de datos para a consulta.
elementos número 8 O número máximo de elementos para mostrar no menú despregable.
emparejador función insensible a maiúsculas e minúsculas O método usado para determinar se unha consulta coincide cun elemento. Acepta un único argumento, itemcontra o cal probar a consulta. Acceda á consulta actual con this.query. Devolve un booleano truese a consulta coincide.
clasificador función coincidencia exacta, diferencia entre
maiúsculas e
minúsculas
Método utilizado para ordenar os resultados de autocompletar. Acepta un único argumento itemse ten o alcance da instancia typeahead. Referencia a consulta actual con this.query.
resaltador función resalta todas as coincidencias predeterminadas Método utilizado para resaltar os resultados de autocompletar. Acepta un único argumento iteme ten o alcance da instancia typeahead. Debería devolver html.

Marcado

Engade atributos de datos para rexistrar un elemento coa funcionalidade typeahead.

  1. <input type = "text" data-provide = "typeahead" >

Métodos

.typeahead(opcións)

Inicializa unha entrada cunha tipografía.