IT

← Tutti gli articoli

Tipi di azioni

BUTTON: l'azione JustZix più semplice — fire-and-forget con personalizzazione per pulsante

· di JustZix Team

Un tipo di azione è così basilare che viene saltato negli articoli. BUTTON — clic → esegui codice → fatto. Nessuno stato, nessuna memory, nessuna lista di opzioni da scegliere. È una «funzione senza stato» nella barra delle azioni. Ma proprio quella semplicità è ciò che lo rende il più potente: BUTTON è l'80% di tutte le azioni in un setup JustZix tipico, perché la maggior parte delle cose che vuoi fare sono «clic = X».

Quando BUTTON, quando qualcos'altro?

EsigenzaTipo di azioneMemory?
«Clic = esegui X»BUTTONNo
«Scegli una di N opzioni»SELECTSì
«Digita testo ed esegui»INPUTSì
«Conserva una bozza / note»TEXTAREASì
«Controlla un range 0-100»SLIDERSì
«3 stati noti (Dev/Stg/Prod)»TOGGLE3Sì

Solo BUTTON è senza stato. Tutti gli altri tipi conservano un valore per action.id (sessionStorage + backup chrome.storage.local). BUTTON = funzione pura: input (clic) → output (effetto sulla pagina).

Prima azione BUTTON

Nell'editor di JustZix → regola → barra delle azioni → «+ BUTTON». Configurazione:

label: "🚀 Riempi demo"   // testo del pulsante + icona
code: |
  // value, $el, $action iniettati automaticamente come extra
  document.querySelector('[name=email]').value = 'demo@test.com';
  document.querySelector('[name=name]').value = 'Demo User';
  document.querySelectorAll('input, textarea').forEach(el =>
    el.dispatchEvent(new Event('input', { bubbles: true }))
  );
  JUSTZIX.log('Dati demo riempiti.');

Clic «🚀 Riempi demo» → campi del modulo riempiti, il framework della pagina (React/Vue/Angular) vede l'evento input → stato aggiornato.

Due colori + customStyles

BUTTON ha 2 colori di base:

color       → sfondo del pulsante
colorText   → colore del testo della label (e dell'icona se emoji)

In più un oggetto customStyles opzionale — override CSS granulare:

customStyles: {
  padding: '8px 16px',         // default 6px 12px
  fontSize: '14px',             // default 12px
  borderRadius: '4px',          // default 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

Rendering: ogni proprietà di customStyles passa per el.style.setProperty(key, value, 'important') — batte le regole di default di JustZix. Questo ti permette di allineare i pulsanti allo stile del brand del sito che stai modificando (es. blu Bootstrap, ripple Material Design, personalizzazione per dominio).

Cosa è disponibile nel campo del codice

Il codice BUTTON gira nel MAIN world (chrome.scripting.executeScript world:'MAIN') tramite background.js. Automaticamente disponibile:

Caso d'uso 1 — Catene rapide

Le sequenze di azioni ripetute spesso possono essere automatizzate da un singolo pulsante:

// Azione «🔥 Flusso di test»
JZ.click('Login');               // clicca l'azione BUTTON con label «Login»
await new Promise(r => setTimeout(r, 500));
JZ.click('Aggiungi al carrello');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Flusso di test completato.');

Catena di 3 pulsanti in 1 → cliccare «Flusso di test» li fa partire in sequenza. Ognuno dei 3 sotto-pulsanti resta riutilizzabile individualmente.

Caso d'uso 2 — Esecuzione condizionale

BUTTON è «esegui su richiesta», quindi perfetto per script distruttivi con una guardia di URL:

// Azione «🗑️ Svuota carrello staging»
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('Solo su staging! Annullamento.');
  alert('Questo pulsante funziona solo su staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`${items.length} articoli svuotati.`);

Nessun rischio di auto-run (come il JS pane), nessun campo di testo da riempire a mano — solo un clic quando vuoi, dove vuoi.

Caso d'uso 3 — Feedback visivo dopo il clic

Vecchio classico: un pulsante che cambia label al successo:

// Azione «💾 Salva stato»
const oldLabel = $el.textContent;
$el.textContent = '⏳ Salvataggio...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Salvato';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Errore';
  JUSTZIX.error('Salvataggio fallito', e);
}

$el è il riferimento DOM del pulsante — modificalo direttamente. Feedback visivo senza stato esterno.

Caso d'uso 4 — Più pulsanti, un flusso

Invece di un pulsante «Flusso QA completo», 5 separati in un cluster visivo:

// Azione «1️⃣»
JUSTZIX.log('Passo 1: login');
JZ.click('Login as test user');

// Azione «2️⃣»
JUSTZIX.log('Passo 2: naviga');
location.href = '/admin/orders';

// Azione «3️⃣»
JUSTZIX.log('Passo 3: filtra');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Ogni passo come pulsante separato → l'utente vede visivamente a che punto è nel flusso. Inoltre può ripetere qualsiasi passo senza ricominciare.

Trappole

Cosa fare dopo

BUTTON è la spina dorsale di tutte le toolbar JustZix. Vedi anche gli altri tipi di azione:

Installa JustZix — completamente gratuito, senza account, senza server.

actionsbuttonfire-and-forgetcustomstylesreference

Valuta questo articolo

Nessuna valutazione — sii il primo.

Vedi anche

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso