Creare azioni personalizzate

 

Con JavaScript, puoi creare azioni personalizzate. Una volta definita un'azione personalizzata, puoi riutilizzarla all'interno del documento.

Per creare un'azione personalizzata, procedi nel seguente modo:

1. Aggiungi un nuovo evento facendo clic sul pulsante Aggiungi evento nella parte inferiore del pannello Eventi.
2. Seleziona il target e l'evento.
3. Per l'azione, seleziona Personalizzata > Aggiungi azione personalizzata. Google Web Designer ti chiede di inserire il codice personalizzato.
   
4. Assegna un nome all'azione nel campo sopra la casella del codice (dopo il prefisso gwd.).
   • Ogni azione personalizzata deve avere un nome univoco all'interno del documento.
   • Il nome dovrebbe essere sufficientemente descrittivo da essere riconoscibile.
   • Se inserisci un nome non valido (ad esempio un nome che include spazi), il campo viene sottolineato in rosso.
5. Definisci la funzione nella casella del codice. Fai riferimento alle API dei componenti per consultare l'elenco di proprietà, eventi e metodi disponibili per ogni componente.
6. Fai clic su OK.

L'evento è configurato in modo da utilizzare la tua azione personalizzata. Ora questa azione è disponibile anche per essere utilizzata per altri eventi, elencati in Personalizzata.

Puoi ridimensionare la finestra di dialogo trascinando l'angolo in basso a destra.

Esempi

Le azioni personalizzate possono essere utilizzate insieme ai componenti per ampliare le funzionalità di Google Web Designer. In tutti gli esempi che seguono viene utilizzato il metodo document.getElementById per specificare l'elemento all'interno del documento a cui si applica l'azione.

Riattivare l'audio di un video ogni volta che viene riprodotto

Aggiungi il seguente evento:

Target	gwd-video_1 (o l'ID del tuo video)
Evento	Video > Riproduci dopo la pausa
Azione	Personalizzata > Aggiungi azione personalizzata
Codice personalizzato	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

Per utilizzare questo codice, procedi nel seguente modo:

• Sostituisci gwd-video_1 con l'ID del tuo video.

Mostrare una didascalia per ogni frame di una Galleria a scorrimento

Aggiungi il seguente evento:

Target	gwd-swipegallery_1 (o l'ID della Galleria a scorrimento)
Evento	Galleria a scorrimento > Frame mostrato
Azione	Personalizzata > Aggiungi azione personalizzata
Codice personalizzato	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

Per utilizzare questo codice, procedi nel seguente modo:

• Sostituisci gwd-swipegallery_1 con l'ID della Galleria a scorrimento.
• Sostituisci caption-div con l'ID dell'elemento di testo che mostra la didascalia.
• Sostituisci il testo della didascalia per ciascun frame nel codice personalizzato.

Passare alla pagina successiva dell'annuncio dopo una pausa di due secondi

Aggiungi il seguente evento:

Target	page1 (o l'ID della pagina iniziale)
Evento	Pagina > Presentazione della pagina pronta
Azione	Personalizzata > Aggiungi azione personalizzata
Codice personalizzato	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

Per utilizzare questo codice, procedi nel seguente modo:

• Sostituisci page1 con l'ID della pagina iniziale.