Nuestro complemento Modal es una versión súper delgada del complemento modal js tradicional, teniendo especial cuidado de incluir solo la funcionalidad básica que requerimos aquí en Twitter.

Descargar

Usando bootstrap-modal

$ ( '#mi-modal' ). modal ( opciones )

Opciones

Nombre	escribe	defecto	descripción
fondo	booleano	falso	Incluye un elemento de fondo modal
teclado	booleano	falso	Cierra el modal cuando se presiona la tecla escape
mostrar	booleano	falso	Abre modal en la inicialización de clase.

Margen

Puede activar modales en su página fácilmente sin tener que escribir una sola línea de javascript. Simplemente asigne a un elemento un data-controls-modalatributo que corresponda a una identificación de elemento modal, y cuando se haga clic, se iniciará su modal. Para agregar opciones modales, simplemente inclúyalas también como atributos de datos.

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

Aviso Si desea que su modal se anime dentro y fuera, simplemente agregue una .fadeclase a su .modalelemento (consulte la demostración para ver esto en acción).

Métodos

.modal(opciones)

Activa tu contenido como modal. Acepta opciones opcionales object.

$ ( '#mi-modal' ). modales ({
  closeOnEscape : verdadero 
})

.modal('alternar')

Cambia manualmente un modal.

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

.modal('mostrar')

Abre manualmente un modal.

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

.modal('ocultar')

Oculta manualmente un modal.

$ ( '#mi-modal' ). modal ( 'ocultar' )

.modal(verdadero)

Devuelve una instancia de clase modal de elementos.

$ ( '#mi-modal' ). modal ( verdadero )

Aviso Alternativamente, esto se puede recuperar con $().data('modal').

Eventos

La clase modal de Bootstrap expone algunos eventos para conectarse a la funcionalidad modal.

Evento	Descripción
mostrar	Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado	Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones css).
ocultar	Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto	Este evento se activa cuando el modal ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones css).

$ ( '#mi-modal' ). enlazar ( 'oculto' , función () {   
  // hacer algo ...
})

Manifestación

Modo de lanzamiento

Este complemento es para agregar interacción desplegable a la barra superior de arranque o navegaciones con pestañas.

Descargar

Usando boostrap-dropdown.js

$ ( '#barra superior' ). menú desplegable ()

Margen

Para agregar rápidamente la funcionalidad desplegable a cualquier elemento de navegación, use el data-dropdownatributo. Cualquier menú desplegable de arranque válido se activará automáticamente.

< clase ul = "pestañas" > 
  <li class = "activo" ><a href = "#" > Inicio </a></li>  
  <li clase = "desplegable" data-dropdown = "desplegable" >   
    <a href = "#" class = "dropdown-toggle" > Menú desplegable </a>  
    <ul clase = "menú desplegable" > 
      <li><a href = "#" > Enlace secundario </a></li> 
      <li><a href = "#" > Algo más aquí </a></li> 
      <li clase = "divisor" ></li> 
      <li><a href = "#" > Otro enlace </a></li> 
    </ul>
  </li>
</ul>

Aviso Si su interfaz de usuario tiene varios menús desplegables, considere agregar el data-dropdownatributo a un elemento contenedor más significativo como .tabso .topbar.

Métodos

$().desplegable()

Una API programática para activar menús para una barra superior determinada o navegación con pestañas.

Manifestación

Este complemento es para agregar la interacción scrollspy (navegación de actualización automática) a la barra superior de arranque.

Descargar

Usando boostrap-scrollspy.js

$ ( '#barra superior' ). menú desplegable ()

Margen

Para agregar fácilmente el comportamiento de scrollspy a su navegación, simplemente agregue el data-scrollspyatributo al archivo .topbar.

<div class = "barra superior" data-scrollspy = "scrollspy" > ... </div>   

Métodos

$().pergaminoespía()

Auto activa los botones de navegación por la posición de desplazamiento de los usuarios.

$ ( 'cuerpo > .barra superior' ). scrollEspía ()

Tenga en cuenta que las etiquetas de anclaje de la barra superior deben tener objetivos de identificación resolubles. Por ejemplo, a <a href="#home">home</a>debe corresponder a algo en el dom como <div id="home"></div>.

.scrollspy('actualizar')

El scrollspy almacena en caché los botones de navegación y las coordenadas de sección para el rendimiento. Si necesita actualizar este caché (probablemente si tiene contenido dinámico), simplemente llame a este método de actualización. Si usó el atributo de datos para definir su scrollspy, simplemente llame a actualizar en el cuerpo.

$ ( 'cuerpo' ). scrollspy ( 'actualizar' )

Manifestación

Echa un vistazo a la navegación de la barra superior en esta página.

Este complemento agrega pestañas rápidas y dinámicas y funcionalidad de píldora.

Descargar

Usando boostrap-tabs.js

$ ( '.pestañas' ). pestañas ()

Margen

Puede activar una pestaña o navegación de píldora sin escribir ningún javascript simplemente dándoles un atributo data-tabso .data-pills

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

Métodos

$().pestañas o $().pastillas

Activa la funcionalidad de pestañas y píldoras para un contenedor determinado. Los enlaces de las pestañas deben hacer referencia a los identificadores en el documento.

< clase ul = "pestañas" > 
  <li class = "active" ><a href = "#home" > Inicio </a></li>  
  <li><a href = "#perfil" > Perfil </a></li> 
  <li><a href = "#mensajes" > Mensajes </a></li> 
  <li><a href = "#settings" > Configuración </a></li> 
</ul>
 
<div class = "píldora-contenido" > 
  <div clase = "activo" id = "inicio" > ... </div>  
  <div id = "perfil" > ... </div> 
  <div id = "mensajes" > ... </div> 
  <div id = "configuración" > ... </div> 
</ul>
 
<script>
  $ ( función () {  
    $ ( '.pestañas' ). pestañas ()
  })
</script>

Manifestación

• Hogar
• Perfil
• Mensajes
• Ajustes

Basado en el excelente complemento jQuery.tipsy escrito por Jason Frame; twipsy es una versión actualizada, que no se basa en imágenes, utiliza css3 para animaciones y atributos de datos para el almacenamiento de títulos.

Descargar

Usando bootstrap-twipsy.js

$ ( '#ejemplo' ). Twipsy ( opciones )

Opciones

Nombre	escribe	defecto	descripción
animar	booleano	verdadero	aplicar una transición de fundido css a la información sobre herramientas
retraso en	número	0	retraso antes de mostrar información sobre herramientas (ms)
retrasar	número	0	retraso antes de ocultar información sobre herramientas (ms)
retroceder	cuerda	''	texto para usar cuando no hay un título de información sobre herramientas presente
colocación	cuerda	'arriba'	cómo colocar la información sobre herramientas - arriba | abajo | izquierda | Correcto
html	booleano	falso	permite contenido html dentro de la información sobre herramientas
En Vivo	booleano	falso	use la delegación de eventos en lugar de controladores de eventos individuales
compensar	número	0	Desplazamiento de píxeles de información sobre herramientas desde el elemento de destino
título	cadena | función	'título'	atributo o método para recuperar el texto del título
generar	cuerda	'flotar'	cómo se activa la información sobre herramientas - hover | enfoque | manual

Métodos

$().twipsy(opciones)

Adjunta un controlador twipsy a una colección de elementos.

.twipsy('mostrar')

Revela un elemento twipsy.

$ ( '#elemento' ). Twipsy ( 'espectáculo' )

.twipsy('ocultar')

Oculta un elemento twipsy.

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

.twipsy (verdadero)

Devuelve una instancia de la clase twipsy de elementos.

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

Aviso Alternativamente, esto se puede recuperar con $().data('twipsy').

Manifestación

El complemento popover proporciona una interfaz simple para agregar popovers a su aplicación. Extiende el complemento boostrap-twipsy.js , ¡así que asegúrese de tomar ese archivo también cuando incluya popovers en su proyecto!

Descargar

Usando boostrap-popover.js

$ ( '#ejemplo' ). ventana emergente ( opciones )

Opciones

Nombre	escribe	defecto	descripción
animar	booleano	verdadero	aplicar una transición de fundido css a la información sobre herramientas
retraso en	número	0	retraso antes de mostrar información sobre herramientas (ms)
retrasar	número	0	retraso antes de ocultar información sobre herramientas (ms)
retroceder	cuerda	''	texto para usar cuando no hay un título de información sobre herramientas presente
colocación	cuerda	'Correcto'	cómo colocar la información sobre herramientas - arriba | abajo | izquierda | Correcto
html	booleano	falso	permite contenido html dentro de la información sobre herramientas
En Vivo	booleano	falso	use la delegación de eventos en lugar de controladores de eventos individuales
compensar	número	0	Desplazamiento de píxeles de información sobre herramientas desde el elemento de destino
título	cadena | función	'título'	atributo o método para recuperar el texto del título
contenido	cadena | función	'contenido de datos'	atributo o método para recuperar texto de contenido
generar	cuerda	'flotar'	cómo se activa la información sobre herramientas - hover | enfoque | manual

Métodos

$().popover(opciones)

Inicializa popovers para una colección de elementos.

.popover('mostrar')

Revela una ventana emergente de elementos.

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

.popover('ocultar')

Oculta una ventana emergente de elementos.

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

Manifestación

flotar para popover

El complemento de alerta es una clase súper pequeña para agregar funcionalidad cercana a las alertas.

Descargar

Usando bootstrap-alerts.js

$ ( ".mensaje de alerta" ). alerta ()

Margen

Simplemente agregue un data-alertatributo a sus mensajes de alerta para darles automáticamente una funcionalidad de cierre.

Métodos

$().alerta()

Envuelve todas las alertas con funcionalidad de cierre. Para que sus alertas se activen cuando estén cerradas, asegúrese de que ya se les haya aplicado la clase .fadey ..in

.alert('cerrar')

Cierra una alerta.

$ ( ".mensaje de alerta" ). alerta ( 'cerrar' )

Manifestación