创建自定义操作

 

您可以使用 JavaScript 创建自己的自定义操作。定义自定义操作后，您可以在文档中重复使用它们。

要创建自定义操作，请执行以下步骤：

1. 点击事件面板底部的添加事件 按钮，添加一个新事件。
2. 选择目标和事件。
3. 对于操作，请依次选择自定义 > 添加自定义操作。Google Web Designer 会提示您输入自定义代码。
   
4. 在代码框上方的字段中输入操作名称（在 gwd. 前缀后面）。
   • 每个自定义操作都必须在文档中具有独一无二的名称。
   • 该名称应具有充分的说明性，以便用户能够看懂。
   • 如果您输入的名称无效（例如包含空格），则该字段会显示红色下划线。
5. 在代码框中定义相应功能。要查看每个组件可用的属性、事件和方法列表，请参见组件 API。
6. 点击确定。

该事件会配置为使用您的自定义操作。此操作现在也可用于自定义下方列出的其他事件。

您可以通过拖动对话框的右下角调整其大小。

示例

您可将自定义操作和组件结合使用，从而扩展 Google Web Designer 的功能。以下示例均使用 document.getElementById 方法指定要对文档中的哪些元素应用自定义操作。

让视频在每次播放时都取消静音

添加以下事件：

目标	gwd-video_1（或视频的 ID）
事件	视频 > 暂停后播放
操作	自定义 > 添加自定义操作
自定义代码	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

要使用此代码，请执行以下操作：

• 将 gwd-video_1 替换为视频的 ID。

为手滑式图库中的每一帧显示图片说明

添加以下事件：

目标	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];

 

要使用此代码，请执行以下操作：

• 将 gwd-swipegallery_1 替换为手滑式图库的 ID。
• 将 caption-div 替换为显示图片说明的文本元素对应的 ID。
• 替换自定义代码中的每一帧对应的图片说明文本。

暂停 2 秒后转到广告中的下一页

添加以下事件：

目标	page1（或起始页的 ID）
事件	页面 > 可以呈现页面了
操作	自定义 > 添加自定义操作
自定义代码	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

要使用此代码，请执行以下操作：

• 将 page1 替换为起始页的 ID。