Bespoke.js–基于浏览器的演示文稿微框架

好好工作，搞好身体，互相帮助

Bespoke.js - http://markdalgleish.com/projects/bespoke.js/

Bespoke.js 非常小（压缩后只有1KB），它的核心库提供简单的 API 和 事件管理，其他功能都使用插件（它有自己的插件生态链）来实现。

官方提供的套件：

• Bespoke.js 生成器 - https://github.com/bespokejs/generator-bespoke
• Bespoke.js 插件生成器 - https://github.com/bespokejs/generator-bespokeplugin
• Bespoke.js 主题生成器 - https://github.com/bespokejs/generator-bespoketheme

创建演示文稿

由于 Bespoke.js 的高度模块化特性，最快捷的方法是使用 Bespoke.js 生成器，它支持 Gulp 构建系统的样板演示。

假设您已经安装了 Node.js，新建空白目录：

1
2

$ npm install -g generator-bespoke
$ yo bespoke

在你的新项目中，你可以使用以下 Gulp 任务

$ gulp serve 运行带有 LiveReload 的预览服务器
$ gulp deploy 部署到 GitHub 页面
$ gulp 将静态资源编译到 “public” 目录

基本用法

定制加载

Bespoke.js 以 UMD 格式发送，这意味着 bespoke 及其插件可用作 CommonJS / AMD 模块。

HTML

你可以使用任意你喜欢的标签，但下面的会更好~

1
2
3
4
5

<article id="presentation">
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>

JavaScript

要创建新的演示文稿，Bespoke.js 提供了 from(selector[, plugins]) 方法，该方法采用了一个选择器或元素引用和一个插件并返回实例。

1
2
3
4
5
6
7
8
9
10
11
12
13

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 等。更多内容请查阅官方资料。

主题演示

使用键盘 “左” “右” 键切换幻灯片。

• Cube - https://bespokejs.github.io/bespoke-theme-cube/
• Voltaire - https://bespokejs.github.io/bespoke-theme-voltaire/
• Nebula - https://bespokejs.github.io/bespoke-theme-nebula/

• Previous
  JavaScript中的Promises
• Next
  Driver.js–页面分步引导

赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！