Bespoke.js 是一个基于浏览器,用于演示文稿的微型框架。用框架来生成 “PPT” 的想法倒是挺有意思的。
Bespoke.js 非常小(压缩后只有1KB),它的核心库提供简单的 API 和 事件管理,其他功能都使用插件(它有自己的插件生态链)来实现。
官方提供的套件:
创建演示文稿
由于 Bespoke.js 的高度模块化特性,最快捷的方法是使用 Bespoke.js 生成器,它支持 Gulp 构建系统的样板演示。
假设您已经安装了 Node.js ,请在空白目录中:
$ npm install -g generator-bespoke
$ yo bespoke
在你的新项目中,你可以使用以下 Gulp 任务
$ gulp serve
运行带有 LiveReload 的预览服务器$ gulp deploy
部署到 GitHub 页面$ gulp
将静态资源编译到 “public” 目录
基本用法
定制加载
Bespoke.js 以 UMD 格式发送,这意味着 bespoke
及其插件可用作 CommonJS / AMD 模块。
HTML
你可以使用任意你喜欢的标签,但下面的会更好~
<article id="presentation">
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
</article>
JavaScript
要创建新的演示文稿,Bespoke.js 提供了 from(selector[, plugins])
方法,该方法采用了一个选择器或元素引用和一个插件并返回实例。
var deck = bespoke.from('#presentation', [plugins]);
// Next slide
deck.next();
// Previous slide
deck.prev();
// Go to a specific slide
deck.slide(0);
// Get the active slide index
deck.slide(); // 0
默认情况下,解析的父元素的所有非脚本子元素都将成为幻灯片。
插件
所有官方插件可以从 npm 或 Bower 安装,例如 $ npm install bespoke-keys 或 $ bower install bespoke-touch
目前官方提供的插件有:键盘和遥控器交互,触摸交互,动画项目符号列表,响应式幻灯片缩放尺寸,背景为动画背景元素,进度条进度,循环演示,录制和播放 vcr 等。更多内容请查阅官方资料。
主题演示
使用键盘 “左” “右” 键切换幻灯片。
2017-08-11