Puede crear sus propias acciones personalizadas con JavaScript. Una vez que defina una acción personalizada, podrá volver a utilizarla dentro de su documento.
Para crear una acción personalizada:
- En la parte inferior del panel Eventos, añada un evento haciendo clic en el botón Añadir evento .
- Seleccione el objetivo y el evento.
- En el caso de las acciones, seleccione Personalizar > Añadir acción personalizada. Al hacerlo, Google Web Designer le solicitará que introduzca su código personalizado.
- Asigne un nombre a la acción en el campo que se encuentra sobre el cuadro de código (después del prefijo
gwd.
).- Cada acción personalizada debe tener un nombre único dentro del documento.
- El nombre debe ser lo suficientemente descriptivo para ser reconocible.
- Si introduce un nombre no válido (como un nombre que incluya espacios), el campo aparecerá subrayado en rojo.
- Defina la función en el cuadro de código. Consulte las API de componentes para obtener una lista de propiedades, eventos y métodos disponibles en cada componente.
- Haga clic en Aceptar.
El evento ya está configurado para utilizar la acción personalizada. La acción también se muestra en Personalizado y se puede utilizar en otros eventos.
Puede cambiar el tamaño del cuadro de diálogo arrastrando la esquina inferior derecha.
Ejemplos
Las acciones personalizadas se pueden usar junto con componentes para ampliar las funciones de Google Web Designer. Todos los ejemplos siguientes usan el método document.getElementById
para especificar el elemento en el documento sobre el que recae la acción.
Añada el siguiente evento:
Objetivo | gwd-video_1 (o el ID del vídeo) |
---|---|
Evento | Vídeo > Reproducción después de la pausa |
Acción | Personalizar > Añadir acción personalizada |
Código personalizado |
|
Para utilizar este código:
- Sustituya
gwd-video_1
por el ID del vídeo.
Añada el siguiente evento:
Objetivo | gwd-swipegallery_1 (o el ID de la galería deslizable) |
---|---|
Evento | Galería deslizable > Fotograma mostrado |
Acción | Personalizar > Añadir acción personalizada |
Código personalizado |
|
Para utilizar este código:
- Sustituya
gwd-swipegallery_1
por el ID de la galería deslizable. - Sustituya
caption-div
por el ID del elemento de texto que muestra el título. - Sustituya el texto del título de cada marco en el código personalizado.
Añada el siguiente evento:
Objetivo | page1 (o el ID de la página de inicio) |
---|---|
Evento | Página > Preparado para presentar la página |
Acción | Personalizar > Añadir acción personalizada |
Código personalizado |
|
Para utilizar este código:
- Sustituya
page1
por el ID de la página de inicio.