맞춤 액션 만들기

자바스크립트를 사용하여 맞춤 작업을 만들 수 있습니다. 맞춤 작업을 정의하고 나면 문서 내에서 재사용할 수 있습니다.

맞춤 작업을 만드는 방법:

이벤트 패널 하단의 이벤트 추가 버튼을 클릭하여 새 이벤트를 추가합니다.
타겟과 이벤트를 선택합니다.
작업은 맞춤 > 맞춤 작업 추가를 선택합니다. Google Web Designer에 맞춤 코드를 입력하라는 메시지가 나타납니다.
코드 상자 위 입력란(gwd. 접두사 뒤)에 작업의 이름을 입력합니다.
- 각 맞춤 작업의 이름은 문서 내에서 고유해야 합니다.
- 이름에는 내용을 알 수 있을 정도의 설명이 있어야 합니다.
- 잘못된 이름(예: 공백이 들어간 이름)을 입력하면 입력란에 빨간색으로 밑줄이 그어집니다.
코드 상자에 기능을 정의합니다. 각 구성요소에 사용할 수 있는 속성, 이벤트 및 메소드의 목록은 구성요소 API를 참조하세요.
확인을 클릭합니다.

이벤트가 맞춤 작업을 사용하도록 구성되었습니다. 이 작업은 이제 맞춤 아래에 나열된 다른 이벤트에도 사용할 수 있습니다.

오른쪽 하단 모서리를 드래그하여 대화상자의 크기를 조절할 수 있습니다.

예제

맞춤 액션을 Google Web Designer의 기능을 확장하는 구성요소와 함께 사용할 수 있습니다. 아래에 있는 모든 예제는 document.getElementById 메소드를 사용하여 액션이 적용되는 문서 내의 요소를 지정합니다.

다음 이벤트를 추가합니다.

타겟	`gwd-video_1`(또는 동영상 ID)
이벤트	동영상 > 일시중지 후 재생
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	`if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }`

이 코드를 사용하는 방법:

다음 이벤트를 추가합니다.

타겟	`gwd-swipegallery_1`(또는 스와이프할 수 있는 갤러리의 ID)
이벤트	스와이프할 수 있는 갤러리 > 프레임이 표시됨
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	`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];`

이 코드를 사용하는 방법:

다음 이벤트를 추가합니다.

타겟	`page1`(또는 시작 페이지의 ID)
이벤트	페이지 > 페이지 표시 준비 완료
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	`setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }`

이 코드를 사용하는 방법:

어떻게 하면 개선할 수 있을까요?