Interaction Manager ti consente di creare interazioni personalizzate che migliorano la funzionalità del tuo sito Web senza richiedere codice aggiuntivo. Queste interazioni personalizzate vengono create combinando regole preimpostate, offrendo possibilità illimitate di funzionalità.
Considerate le regole come ingredienti: possono essere combinate in molti modi diversi per creare una varietà di risultati diversi.
Alcuni tutorial di esempio di ciò che può essere creato con Interaction Manager, possono essere trovati su Blocs Academy.
Apri il gestore delle interazioni
Per avviare Interaction Manager, vai su Barra dei menu principale e dal Windows menu, selezionare Responsabile dell'interazione o in alternativa usa la scorciatoia da tastiera ⌃⌘io.
Aggiungi interazione
Per creare una nuova interazione, fare clic su + pulsante che si trova nell'angolo in alto a destra della finestra Interaction Manager o in alternativa utilizzare la scorciatoia da tastiera ⌃n.
Rinomina interazione
È possibile rinominare un'interazione semplicemente cliccando sul testo dell'elemento interazione e digitando un nuovo nome.
Interazione duplicata
È possibile duplicare un'interazione tramite clic destro e selezionando duplicare dal menu contestuale o in alternativa utilizzare la scorciatoia da tastiera ⌘+D.
Rimuovi interazione
Per rimuovere ed eliminare un'interazione personalizzata, seleziona semplicemente l'elemento di interazione che desideri rimuovere e fai clic su - pulsante, che si trova in alto a destra della finestra Interaction Manager oppure utilizzare la scorciatoia da tastiera ⌘+⌫.
Modifica interazione
Per modificare un'interazione, fare clic su impostazioni pulsante che si trova all'estrema destra dell'elemento di interazione, oppure fai semplicemente doppio clic sull'elemento di interazione. Questo aprirà un popover contenente tutte le regole contenute nell'interazione.
Inserisci una regola
Per inserire una nuova regola in un'interazione, è sufficiente fare clic su + pulsante che si trova in alto a destra del popover di interazione o in alternativa utilizzare la scorciatoia da tastiera ⌃n. Questo aprirà un menu a discesa contenente tutte le regole disponibili che possono essere utilizzate nelle interazioni personalizzate. Cliccando su una, la si inserirà sotto la regola attualmente selezionata.
Condizionali
Istruzione If
La regola di istruzione if viene utilizzata per eseguire la logica condizionale. Consente di inserire al suo interno regole che vengono attivate solo se una condizione specificata viene valutata come vera. Ciò è utile per il processo decisionale nelle interazioni personalizzate, consentendo risultati diversi in base a determinate condizioni.
Le istruzioni if di Custom Interaction supportano le seguenti variabili: URL, Visible, On Screen, Scroll Y, Cookie, Operating System (OS), Time Range, Daytime, Nighttime, Date, Day, Month, Weekday, Weekend. Tutte le variabili consentono di specificare un valore di confronto e supportano vari operatori.
Navigazione
Vai alla pagina
Questa regola indirizzerà il browser alla pagina specificata.
Vai all'URL
Questa regola indirizzerà il browser all'URL specificato.
Scorri fino a Target
Questa regola scorrerà fino all'elemento con l'ID o la classe specificati.
Ricarica la pagina
Questa regola ricaricherà la pagina corrente nel browser.
Classi
Attiva / disattiva classe
Questa regola attiverà/disattiverà le classi specificate sugli elementi con gli ID o le classi specificati.
Aggiungi classe
Questa regola aggiungerà le classi specificate agli elementi con gli ID o le classi specificati.
Rimuovi classe
Questa regola rimuoverà le classi specificate dagli elementi con gli ID o le classi specificati.
Action
Imposta attributo
Questa regola imposterà il valore di un attributo dati per l'elemento con l'ID o la classe specificati.
Attiva / disattiva visibilità
Questa regola attiverà/disattiverà la visibilità degli elementi con gli ID o le classi specificati.
Attiva / disattiva modale
Questa regola attiva/disattiva una finestra modale (mostra/nascondi) con l'#ID specificato.
Collegamento telefonico
Questa regola avvierà una chiamata telefonica (sui dispositivi supportati) al numero di telefono specificato.
email link
Questa regola aprirà il client di posta elettronica dell'utente corrente con il campo indirizzo compilato con l'indirizzo di posta elettronica specificato.
Scarica File
Questa regola attiverà il download del file specificato.
Invia modulo
Questa regola invierà un modulo con l'ID o la classe specificati.
Ripristina modulo
Questa regola reimposterà un modulo con l'ID o la classe specificati.
Rimuovi elemento
Questa regola rimuoverà un elemento con l'ID o la classe specificati.
Disabilita elemento
Questa regola disabiliterà un elemento con l'ID o la classe specificati.
Chiama JavaScript
Questa regola può essere utilizzata per richiamare funzioni JavaScript personalizzate.
Selezione
Seleziona la scheda
Questa regola selezionerà la scheda per una scheda Bric con l'#ID specificato.
Fare clic sull'elemento
Questa regola farà clic programmaticamente sull'elemento con l'ID o la classe specificati.
Elemento di messa a fuoco
Questa regola imposterà programmaticamente il focus sull'elemento con l'ID o la classe specificati.
Controlla l'elemento
Questa regola imposterà programmaticamente lo stato di spunta dell'elemento con l'ID o la classe specificati.
Testo
Imposta testo
Questa regola imposterà il contenuto testuale specificato per l'elemento con l'ID o la classe specificati.
Copia testo
Questa regola copierà una stringa di testo specificata o il contenuto testuale di un elemento nella clipboard dell'utente.
Valore impostato
Questa regola imposterà il valore per l'elemento di input con l'ID o la classe specificati.
Video
Video Player
Questa regola può attivare eventi quali riproduzione, pausa, arresto e disattivazione dell'audio per l'elemento del lettore video con l'ID specificato.
audio
Audio Player
Questa regola può attivare eventi come riproduzione, pausa, arresto e disattivazione audio per l'elemento del lettore audio con l'ID o la classe specificati.
Riprodurre l'audio
Questa regola riprodurrà il file audio mp3 assegnato (Aggiungi file audio a Gestione risorse).
bootstrap
giostra
Questa regola può attivare eventi come riproduzione, pausa, successivo e precedente per l'elemento carosello con l'ID specificato.
Interazioni
Chiama interazione personalizzata
Questa regola chiamerà un'altra interazione personalizzata e consentirà un ritardo impostato in millisecondi.
Interazione in pausa
Questa regola aggiunge un ritardo (in millisecondi) prima che vengano eseguite le successive regole di interazione.
Interrompere l'interazione
Questa regola impedisce a un'interazione personalizzata di eseguire ulteriori regole successive.
Feedback
Notifica
Questa regola attiverà una notifica web del browser con il messaggio specificato.
Mettere in guardia
Questa regola attiverà un avviso con il messaggio specificato.
Registro della console
Questa regola creerà un registro del browser con il testo specificato.
Cookies
Set di biscotti
Questa regola imposterà un cookie nel browser dell'utente con un nome, un valore e un numero di giorni specificati.
Distruggi il biscotto
Questa regola eliminerà un cookie con un nome specificato nel browser dell'utente.
Varie
Imposta HTML
Questa regola imposterà l'HTML dell'elemento con l'ID o la classe specificati.
Interrompi caricamento
Questa regola interromperà il caricamento del browser web.
Interrompi caricamento
Questa regola interromperà il caricamento del browser web.
Duplica una regola
È possibile duplicare una regola tramite clic destro e selezionando duplicare dal menu contestuale o in alternativa utilizzare la scorciatoia da tastiera ⌘+D.
Rimuovi una regola
Per rimuovere una regola da un'interazione, seleziona semplicemente la regola che desideri rimuovere e fai clic su - pulsante che si trova in alto a destra nel popover di interazione.
Posizionare all'interno dell'istruzione If
È possibile inserire rapidamente più regole all'interno di un'istruzione if selezionandole, facendo clic con il pulsante destro del mouse e scegliendo Posizionare all'interno > Istruzione If dal menu di scelta rapida.
Codice abbreviato dei dati
Ora puoi usare il dati() codice abbreviato in un'interazione personalizzata per ottenere personalizzato attributo dei dati valori dall'elemento trigger quando l'interazione viene eseguita. Basta posizionare l'attributo dati target all'interno delle parentesi, in questo modo: dati(mio-attributo). L'attributo devono obbligatoriamente: essere memorizzato anche sull'elemento di attivazione.
È possibile utilizzare il dati() codice breve in qualsiasi campo di testo della regola di interazione. Scopri di più sull'aggiunta di attributi di dati personalizzati agli elementi Qui..
Applica interazioni personalizzate
Le interazioni personalizzate possono essere applicate a quasi tutti gli elementi all'interno Blocs, elementi come pulsanti, immagini e Icone avere a disposizione un'opzione di interazione personalizzata nel menu a discesa delle interazioni standard della barra laterale.
Altri elementi come Blocs, righe, colonne, div e testo mostrerà un riquadro di interazione personalizzato nell'ispettore della barra laterale.
Migliori Gestione menu supporta l'utilizzo di interazioni personalizzate nelle voci di menu.
Attiva interazione personalizzata
Nella maggior parte dei casi, le interazioni personalizzate possono essere attivate in tre modi: quando un elemento è cliccato, quando il cursore del mouse è in bilico sopra un elemento e quando il cursore del mouse lascia un elemento.
È anche possibile attivare un'interazione personalizzata una volta che una pagina è stata creata. caricato, questo può essere fatto tramite il opzioni delle impostazioni della pagina.
È anche possibile trascinare un'interazione personalizzata dall'Interaction Manager sugli elementi su Blocs canvas di progettazione per applicarli. Oltre a questo, puoi trascinare interazioni personalizzate sulle pagine nel Page Navigator per applicare un'interazione personalizzata di caricamento pagina.