API JavaScript & Eventos

Control programático de componentes y manejo de eventos

1 Control Programático de Modal

Controla modales con métodos JavaScript en lugar de atributos de datos.

API del Modal:

const modal = new bootstrap.Modal('#myModal');
modal.show();    // Mostrar
modal.hide();    // Ocultar
modal.toggle();  // Toggle
modal.dispose(); // Dispose

Log de eventos del modal...

2 Eventos del Modal

Los modales emiten eventos que puedes escuchar para ejecutar código personalizado.

Evento	Cuándo se dispara
`show.bs.modal`	Antes de mostrar
`shown.bs.modal`	Después de mostrar
`hide.bs.modal`	Antes de ocultar
`hidden.bs.modal`	Después de ocultar

Escuchar Eventos:

const el = document.getElementById('myModal');
el.addEventListener('shown.bs.modal', function(e) {
  console.log('Modal mostrado!');
  // Tu código aquí
});

3 Control Programático de Carrusel

Controla el carrusel programáticamente y responde a eventos.

Slide 1

Slide 2

Slide 3

API del Carrusel:

const carousel = new bootstrap.Carousel('#carousel');
carousel.next();    // Siguiente slide
carousel.prev();    // Slide anterior
carousel.pause();   // Pausar auto-play
carousel.cycle();   // Reanudar
carousel.to(2);     // Ir al slide índice 2

Log de eventos del carrusel...

4 Toast Notifications

Los toasts son notificaciones ligeras que requieren inicialización JavaScript.

Crear Toast:

const toast = new bootstrap.Toast('#myToast', {
  animation: true,
  autohide: true,
  delay: 3000
});
toast.show();

5 Control de Offcanvas

Los offcanvas son paneles deslizantes que pueden ser controlados programáticamente.

API de Offcanvas:

const offcanvas = new bootstrap.Offcanvas('#myOffcanvas');
offcanvas.show();
offcanvas.hide();
offcanvas.toggle();

Log de eventos del offcanvas...

🎯 Puntos Clave de la API JavaScript

Instanciación: Crea instancias con new bootstrap.ComponentName(element, options)
Métodos: Cada componente tiene métodos como show() , hide() , etc.
Eventos: Todos los componentes emiten eventos antes/después de acciones
Dispose: Limpia componentes con dispose() cuando ya no se necesitan
Opciones: Configura comportamiento pasando objeto de opciones al constructor

← Anterior Volver a la Lección