El panel de acciones — 6 tipos de controles
El panel de acciones es la segunda barra flotante de JustZix — la de controles interactivos con los que manejas una página sobre la marcha. Cada acción es uno de seis tipos y está anclada a una carpeta o un conjunto de reglas, así que aparece justo donde la necesitas.
Qué es una barra de acciones
Mientras que la primera barra de JustZix sirve para activar y desactivar reglas, el panel de acciones es más que interruptores. Es un conjunto de controles interactivos con los que manejas una página mientras trabajas — ejecutar código bajo demanda, pasarle valores y cambiar de modo.
La barra está anclada a una carpeta, un grupo o un conjunto de reglas. Cuando esa carpeta está activa en la página actual, sus acciones aparecen en el panel flotante; cuando no coincide, el panel queda vacío. Así, una página de tienda muestra controles distintos a un panel de administración. La barra recuerda su posición, y un clic derecho la oculta durante el resto de la sesión.
Seis tipos de controles
Cada acción tiene una etiqueta, un color y un atajo de teclado opcional. Eliges uno de los seis tipos según lo que necesites:
BUTTON— un botón fire-and-forget; un clic simplemente ejecuta código JS.SELECT— una lista desplegable; opciones estáticas o generadas por JS, y elegir una dispara la acción.INPUT— un único campo de texto al estilo barra de comandos; escribes un valor y confirmas.SLIDER— un deslizador que controla una variable CSS en vivo, como el brillo o el zoom de la página.TEXTAREA— un bloc de notas multilínea cuyo contenido se recuerda por separado para cada dominio.TOGGLE3— un control segmentado de tres estados, ideal para modos comodev / staging / prod.
Del simple clic al valor introducido
El tipo más simple es BUTTON — un objetivo, un clic. SELECT y TOGGLE3 añaden elección: en lugar de un botón por variante, mantienes un único control con varios estados. INPUT y TEXTAREA van más allá y aceptan el texto que aportas en el momento — el código de la acción lee ese valor y hace con él lo que hayas diseñado.
SLIDER es la excepción porque funciona de forma continua: arrastras el tirador y la variable CSS vinculada cambia al instante, sin nada que confirmar. Es la elección natural para ajustes que quieres ver en tiempo real.
Las acciones ejecutan código bajo demanda
Detrás de cada control hay un pequeño fragmento de CSS o JavaScript. La diferencia con una regla normal es que una regla se ejecuta automáticamente al cargar la página, mientras que una acción espera — se ejecuta solo cuando la usas. Es perfecto para operaciones que no quieres cada vez: vaciar un formulario, generar datos de prueba, cambiar de tema, enviar la página a otra herramienta.
Como el código de la acción se ejecuta en el mismo mundo que las reglas, tiene acceso al DOM de la página y a los globales de JustZix, así que un solo botón puede disparar un flujo de trabajo de varios pasos. El panel de acciones convierte un conjunto de reglas estático en un pequeño pupitre de mando adaptado a la página.
Entradas de blog relacionadas
Entradas que tratan este tema con más detalle.