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:
- Aggiungi un nuovo evento facendo clic sul pulsante Aggiungi evento nella parte inferiore del pannello Eventi.
- Seleziona il target e l'evento.
- Per l'azione, seleziona Personalizzata > Aggiungi azione personalizzata. Google Web Designer ti chiede di inserire il codice personalizzato.
- 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.
- 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.
- 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.
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 |
|
Per utilizzare questo codice, procedi nel seguente modo:
- Sostituisci
gwd-video_1
con l'ID del tuo video.
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 |
|
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.
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 |
|
Per utilizzare questo codice, procedi nel seguente modo:
- Sostituisci
page1
con l'ID della pagina iniziale.