创建自定义操作

 

您可以使用 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。
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题