Documentación Oficial - Mkspanishcss Lógica js

Alertas Dinámicas

El script provee tres formas distintas de lanzar notificaciones o alertas al usuario mediante interacciones de click:

Clase Trigger	Atributo Requerido	Comportamiento
.m-alerta	`data-alerta="..."`	Lanza un `alert()` nativo del navegador.
.m-alerta-personalizada	`data-titulo` y `data-mensaje`	Genera e inyecta un modal HTML flotante con botón de cierre.
.m-alerta-auto	`data-mensaje="..."`	Muestra un Toast flotante que se autodestruye a los 3 segundos.

Ejemplos Prácticos

<button class="m-alerta" data-alerta="Texto de la alerta">Alerta Nativa</button> <button class="m-alerta-personalizada" data-titulo="Título" data-mensaje="Mensaje">Alerta HTML</button> <button class="m-alerta-auto" data-mensaje="Completado">Toast Auto-Cierre</button>

Control de Visibilidad e Interceptores

Controla el estado de visualización de cualquier contenedor objetivo usando selectores CSS en atributos de datos:

.m-toggle: Alterna la presencia de la clase .m-oculto.
.m-mostrar / .m-ocultar: Fuerza estados de visualización directos.

Ejemplo de Bloque Colapsable / Acordeón

Contenido Dinámico

Este contenedor puede ocultarse o mostrarse bajo demanda del usuario de forma ágil.

<button class="m-toggle" data-toggle="#bloque-demo">Alternar Bloque</button> <div id="bloque-demo" class="card"> <p>Contenido ocultable...</p> </div>

Ventanas Modales Avanzadas

Lógica completa para ventanas emergentes. Soporta cierre por botón, haciendo click en el fondo exterior, o presionando la tecla ESC.

<button class="m-modal-abrir" data-modal="#mi-modal">Abrir Modal</button> <div id="mi-modal" class="m-modal m-modal-oculto"> <div class="m-modal-contenido"> <h3>Título del Modal</h3> <p>Cuerpo del mensaje estructurado...</p> <button class="m-modal-cerrar" data-cerrar-modal="#mi-modal">Cerrar</button> </div> </div>

Sistema de Pestañas (Tabs)

Permite alternar paneles de visualización dentro de un mismo espacio común mediante el contenedor padre .m-tabs:

Datos de Usuario

Administra los datos generales de tu cuenta de acceso público.

Ajustes de Credenciales

Configura la verificación en dos pasos y cambia contraseñas.

<div class="m-tabs"> <div class="m-tabs-botones"> <button class="m-tab" data-tab="#tab-uno">Perfil</button> <button class="m-tab" data-tab="#tab-dos">Seguridad</button> </div> <div id="tab-uno" class="m-tab-contenido">...</div> <div id="tab-dos" class="m-tab-contenido m-tab-oculto">...</div> </div>

Menús Desplegables (Dropdowns)

Soporta activación selectiva por Click o mediante eventos dinámicos de Hover de manera nativa:

<div class="m-dropdown"> <button class="m-dropdown-boton" data-dropdown="#mi-menu">Opciones</button> <div id="mi-menu" class="m-dropdown-menu m-dropdown-oculto"> <a href="#" class="m-dropdown-item">Enlace 1</a> <a href="#" class="m-dropdown-item">Enlace 2</a> </div> </div>

Tooltips Flotantes (Cálculo de Posición Novedoso)

Los tooltips inyectan dinámicamente un nodo flotante en el body y calculan sus coordenadas de posición en tiempo real sobre los ejes top y left:

<span class="m-tooltip" data-tooltip="Mensaje emergente">Texto</span>  <span class="m-tooltip-click" data-tooltip-click="¡Copiado!">Texto</span>

Soporte de Navegación, Mobile y Scroll Automático

Lógica integrada para menús complejos y barras fijas adaptables:

Despliegue Móvil: El botón .menu-movil-boton utiliza `data-menu="#id"` para alternar la clase activa del bloque de enlaces.
Scroll Suave Inteligente: Los elementos con la clase .menu-scroll-link ejecutan un desplazamiento fluido hacia el ID indicado en su atributo `href`.
Scroll Spy (Seguimiento Activo): Al desplazarse, el script detecta las secciones en pantalla y asigna automáticamente la clase .menu-activo al enlace correspondiente en el menú.