菜单

Reveal.js 主 API

相关源文件

Reveal.js 主要 API 提供了创建、控制和配置演示文稿的核心功能。本文档涵盖了向开发人员公开的用于与 Reveal.js 交互的主要 API 方法。有关插件和扩展的信息,请参阅 插件系统

API 概述

Reveal.js API 通过一个返回已配置实例的工厂函数进行访问。这种设计允许多个独立的 Reveal.js 演示文稿在同一页面上共存。

来源: js/reveal.js41-132

创建 Reveal.js 实例

要创建新的 Reveal.js 实例,请调用主工厂函数,并传入一个可选的元素和配置对象

工厂函数接受两个参数

  • revealElement - 包含演示文稿的 HTML 元素(默认为 .reveal
  • options - 演示文稿的配置选项

来源: js/reveal.js41-49

初始化

初始化流程

来源: js/reveal.js131-169 js/reveal.js195-250

初始化方法

initialize(options)

启动演示文稿,并返回一个在 Reveal.js 完全初始化后解析的 Promise。

来源: js/reveal.js131-169

导航 API 允许您以编程方式在演示文稿的幻灯片之间导航。

核心导航方法

方法描述
slide(h, v, f, origin)导航到指定索引的幻灯片
left()向左导航
right()向右导航
up()向上导航
down()向下导航
prev()导航到上一张幻灯片
next()导航到下一张幻灯片
prevFragment()导航到上一个片段
nextFragment()导航到下一个片段

来源: js/reveal.js1231-1294 js/reveal.js2042-2164

幻灯片导航图

来源: js/reveal.js1231-1294 js/reveal.js2042-2164

配置

configure(options)

应用配置设置到演示文稿。可以在初始化时调用,也可以稍后更新设置。

来源: js/reveal.js477-553

配置流程

来源: js/reveal.js477-553

事件系统

Reveal.js 使用自定义事件系统,允许您绑定到各种演示文稿事件。

事件方法

方法描述
on(type, listener, useCapture)绑定事件监听器
off(type, listener, useCapture)移除事件监听器

来源: js/reveal.js673-687

关键事件

事件描述
readyReveal.js 初始化时触发
slidechanged幻灯片更改时触发
fragmentshown片段显示时触发
fragmenthidden片段隐藏时触发
resize演示文稿调整大小时触发
autoanimate自动动画发生时触发

来源: js/reveal.js715-769

事件用法示例

状态管理

状态方法

方法描述
getState()返回一个包含当前状态的对象
setState(state)从对象设置演示文稿状态
getIndices(slide)返回幻灯片索引,格式为对象
getPreviousSlide()返回上一张幻灯片元素
getCurrentSlide()返回当前幻灯片元素

来源: js/reveal.js3127-3225

状态结构图

来源: js/reveal.js3127-3181

布局和尺寸

Reveal.js 自动处理幻灯片及其内容的尺寸和布局。

布局方法

方法描述
layout()更新演示文稿布局
getScale()返回当前的演示文稿缩放比例
getComputedSlideSize()返回幻灯片的计算尺寸

来源: js/reveal.js775-888 js/reveal.js966-1002

布局流程

来源: js/reveal.js775-888

DOM 元素

Reveal.js 维护着构成演示文稿的重要 DOM 元素的引用。

DOM 访问方法

方法描述
getRevealElement()返回根 Reveal 元素
getSlidesElement()返回幻灯片容器元素
getViewportElement()返回视口元素
getSlides()返回所有幻灯片元素
getHorizontalSlides()返回水平幻灯片元素
getVerticalSlides()返回垂直幻灯片元素
getSlideBackground(slide)返回幻灯片的背景元素

来源: js/reveal.js3234-3262

DOM 结构图

来源: js/reveal.js324-348 js/reveal.js3234-3262

演示文稿控件

演示文稿模式方法

方法描述
isReady()返回演示文稿是否已初始化
isPaused()返回演示文稿是否已暂停
pause()暂停演示文稿
resume()恢复演示文稿
togglePause(override)切换暂停状态
isOverview()返回概览模式是否激活
toggleOverview(override)切换概览模式
isAutoSliding()返回自动幻灯片模式是否激活
toggleAutoSlide(override)切换自动幻灯片模式

来源: js/reveal.js1120-1218 js/reveal.js3324-3406

与控制器的集成

Reveal.js API 与处理演示文稿特定方面的各种控制器进行交互。

控制器集成

来源: js/reveal.js108-126

高级方法

实用程序和辅助方法

方法描述
getConfig()返回当前配置
getIndices(slide)返回幻灯片的索引
getTotalSlides()返回幻灯片总数
getSlidePastCount()返回已访问幻灯片的数量
isFirstSlide()返回是否位于第一张幻灯片
isLastSlide()返回是否位于最后一张幻灯片
isVerticalSlide()返回幻灯片是否为垂直幻灯片
sync()更新演示文稿以匹配当前状态
isOverview()返回概览模式是否激活
isAutoSliding()返回自动播放是否激活
hasPlugin(id)返回插件是否已注册
getPlugin(id)返回已注册的插件
getPlugins()返回所有已注册的插件
registerPlugin(id, plugin)注册插件

来源: js/reveal.js1048-1114 js/reveal.js3065-3126 js/reveal.js3263-3323

清理和拆卸

destroy()

移除所有事件监听器,并将演示恢复到其原始状态。

来源: js/reveal.js607-667

使用示例

下面是一个使用 Reveal.js API 的完整示例

来源: js/reveal.js41-53 js/reveal.js131-169 js/reveal.js673-687 js/reveal.js1231-1294

与其他模块的关系

Reveal.js 主 API 作为框架中所有其他模块的核心协调器。它初始化并协调各种控制器,并为用户提供一个干净的公共 API 以供交互。

有关特定子系统的更详细信息,请参阅