< Return to Video

Events Overview - Google Web Designer

  • 0:03 - 0:09
    大家好，我叫Maciek
    是Google Web Designer团队的一名工程师
  • 0:09 - 0:10
    今天，我将向大家演示如何使用
  • 0:10 - 0:13
    Google Web Designer事件系统
  • 0:13 - 0:14
    看完今天的视频后
  • 0:14 - 0:19
    你就会了解如何在文档中设置事件处理脚本
  • 0:19 - 0:21
    我准备了一个简单的示例文件
  • 0:21 - 0:24
    其中含有轮播式图库和蓝色div
  • 0:25 - 0:26
    要在文档中加入事件处理脚本
  • 0:26 - 0:30
    请在右侧找出事件面板
  • 0:32 - 0:33
    这里会列出所有
  • 0:33 - 0:36
    已安装的事件处理脚本
  • 0:36 - 0:38
    因为我们还没有任何处理脚本
  • 0:38 - 0:39
    所以这个列表是空的
  • 0:39 - 0:40
    但如果有很多处理脚本
  • 0:40 - 0:45
    你可以进行排序或过滤
  • 0:45 - 0:46
    要在列表中加入事件处理脚本
  • 0:46 - 0:49
    必须先打开事件对话框
  • 0:49 - 0:52
    打开这个对话框有几种方式
  • 0:52 - 0:55
    第一种方式
    如果已经确定了要选择的目标
  • 0:56 - 0:58
    可以右键点击目标元素，然后选择
  • 0:58 - 0:59
    “添加事件…”
  • 1:00 - 1:03
    这样就能将指定元素设为目标
  • 1:03 - 1:07
    我们先取消选择这个元素
  • 1:07 - 1:11
    然后用右下角这个小小的加号图标
    打开事件对话框
  • 1:12 - 1:16
    这样就能在未选择偏好设置的情况下
    打开事件对话框
  • 1:16 - 1:18
    首先
  • 1:18 - 1:19
    我们要选择目标
  • 1:19 - 1:23
    这是会触发事件处理脚本的元素
  • 1:23 - 1:26
    在这个示例中，我要选择“轮播”
  • 1:26 - 1:28
    接着我们要选择
  • 1:28 - 1:30
    用于触发事件处理脚本的事件
  • 1:30 - 1:33
    大多数元素都支持“鼠标”和“触摸”事件
  • 1:33 - 1:37
    而轮播元素还支持某些特定的特殊事件
  • 1:37 - 1:40
    我要选择点击事件
  • 1:40 - 1:42
    现在就可以选择操作了
  • 1:42 - 1:47
    这里的操作指的是为响应事件而执行的操作
  • 1:47 - 1:51
    大多数元素都可以设置CSS样式
  • 1:51 - 1:54
    以及添加稍后会提到的自定义操作
  • 1:54 - 1:57
    如果你的文档中有其他自定义元素
  • 1:57 - 2:01
    这里或许还会出现其他事件选项
  • 2:01 - 2:04
    在这个示例中，我要选择“设置样式”
  • 2:04 - 2:07
    接着我们要选择接收方
  • 2:07 - 2:11
    这是指我们想要更改其CSS的元素
  • 2:11 - 2:14
    在这个示例中，我要选择蓝色div
  • 2:14 - 2:17
    然后为它指定几个CSS属性
  • 2:17 - 2:23
    我要把div的背景颜色改成红色
  • 2:23 - 2:26
    你还可以选择加/减速选项
  • 2:26 - 2:29
    添加时长，然后点击“确定”
  • 2:29 - 2:30
    来保存设置
  • 2:30 - 2:34
    在文档中添加事件处理脚本就是这么简单
  • 2:34 - 2:38
    接下来我们可以预览文档，看看工作成果
  • 2:40 - 2:46
    现在，只需点击轮播式图库
  • 2:46 - 2:48
    蓝色div就会慢慢变成红色
  • 2:48 - 2:51
    真的很简单
  • 2:51 - 2:54
    假设我们之前的设置有错误
  • 2:54 - 2:56
    因而想要更改事件处理脚本
  • 2:56 - 2:58
    这时不需制作全新的事件处理脚本
  • 2:59 - 3:03
    只要修改刚刚制作的事件处理脚本即可
  • 3:03 - 3:04
    双击该事件处理脚本
  • 3:05 - 3:09
    就能以编辑模式打开事件对话框
  • 3:09 - 3:14
    让我们回到操作屏幕并选择自定义操作
  • 3:14 - 3:19
    你可以在这里编写任何有效的JavaScript代码
  • 3:19 - 3:24
    我要为代码加上函数名称
  • 3:24 - 3:31
    为了进行演示，我要发出提醒调用
  • 3:37 - 3:39
    看起来不错
  • 3:40 - 3:42
    然后点击“确定”保存
  • 3:43 - 3:45
    在这里可以看到事件处理脚本已经更新
  • 3:46 - 3:50
    要显示效果，可以调用函数
  • 3:50 - 3:55
    让我们来预览一下
  • 3:56 - 3:58
    点击轮播式图库
  • 3:58 - 4:00
    提醒内容就会出现
  • 4:00 - 4:05
    我爱Google Web Designer！
  • 4:05 - 4:07
    今天的视频到此为止
  • 4:07 - 4:10
    如有任何与事件
  • 4:10 - 4:12
    或Google Web Designer其他主题相关的疑问
  • 4:12 - 4:14
    欢迎留言提问
  • 4:15 - 4:17
    谢谢观看
Title:
Events Overview - Google Web Designer
Description:
more » « less
Duration:
04:19

Chinese, Simplified subtitles

Revisions

Our website uses cookies for analysis purposes.