您现在的位置:

建站资源下载详情

用于构建现代 HTML 演示文稿的 JS 库deck.js

来源：易助科技网浏览量：9收藏

简介

用于构建现代HTML演示文稿的JavaScript库。deck.js足够灵活，可以让高级CSS和JavaScript作者制作高度定制的deck，但也为HTML新手提供了模板和主题，以构建标准的幻灯片。

（下载的附件中附有DEMO）

模块

deck.core模块提供了创建和移动幻灯片的所有基本功能。它应用和删除类来指示幻灯片组及其幻灯片的状态，允许CSS处理每个状态的视觉表示。它还提供了与幻灯片组交互的方法，以及转到下一张和上一张幻灯片的基本键绑定。单独的扩展模块使用core提供的API提供更多功能。

更多模块

Core模块为您提供了带有左右箭头导航的基本幻灯片功能，但您可能需要更多：

deck.goto：添加一个快捷键以跳转到任何幻灯片编号。点击g，输入幻灯片编号，然后点击回车键。

deck.menu：添加菜单视图，使您可以查看网格中的所有幻灯片。点击m切换到菜单视图，继续导航甲板，点击m返回到正常视图。触摸设备可以双击甲板在视图之间切换。

deck.navigation：为键盘倾斜程度较低的用户添加可点击的左右按钮。

deck.status：添加页码指示器。（当前/总计）

deck.scale：对于支持幻灯片的浏览器，使用CSS Transforms缩放每个幻灯片以适应幻灯片组容器。

下载包中的每个扩展文件夹都包含必要的JavaScript、CSS和HTML文件。有关deck.js中包含的扩展模块的完整列表，请查看文档。

插件依赖

浏览器支持情况

deck.js已经用jQuery 1.6+进行了测试，并在IE7+、Chrome、FF、Safari和Opera中运行。功能更强的浏览器会得到更大的增强，但基本的幻灯片演示适用于上面列出的所有浏览器。请不要在IE6中进行演示。

使用

1. HTML

<section class="slide">
  <h2>How to Make a Deck</h2>
  <ol>
    <li>
      <h3>Write Slides</h3>
      <p>Slide content is simple HTML.</p>
    </li>
    <li>
      <h3>Choose Themes</h3>
      <p>One for slide styles and one for deck transitions.</p>
    </li>
    …
  </ol>
</section>

最后一张幻灯片有几个步骤。要在幻灯片中创建子步骤，只需嵌套它们：

<section class="slide">
  <h2>Extensions</h2>
  <p>Core gives you basic slide functionality...</p>
  <ul>
    <li class="slide">
      <h3>deck.goto</h3>
      <p>Adds a shortcut key to jump to any slide number...</p>
    </li>
    <li class="slide">...</li>
    <li class="slide">...</li>
    <li class="slide">...</li>
  </ul>
</section>

图像元素

<img src="http://placekitten.com/600/375" alt="Kitties">

Blockquotes元素

<blockquote cite="http://example.org">
  <p>Food is an important part of a balanced diet.</p>
  <p><cite>Fran Lebowitz</cite></p>
</blockquote>

视频元素

<iframe src="http://player.vimeo.com/video/1063136?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>

2. 初始化

初始化deck，使用选择器匹配的每个元素作为幻灯片。还可以传递一个字符串选择器或jQuery对象的数组，在这种情况下，数组中的每个选择器都被视为幻灯片。第二个参数是一个可选的选项对象，它将扩展默认值。

用户还可以只向init传递一个选项对象。在这种情况下，幻灯片选择器将是options.selectors.slide，默认为.slide。

$.deck('.slide');

$.deck([
   '#first-slide',
   '#second-slide',
   '#etc'
]);

3. 配置项

deck的默认设置对象。所有扩展都应该扩展这个对象，为它们的任何选项添加默认值。

$.deck.defaults = {
   classes: {
      after: 'deck-after',
      before: 'deck-before',
      childCurrent: 'deck-child-current',
      current: 'deck-current',
      loading: 'deck-loading',
      next: 'deck-next',
      onPrefix: 'on-slide-',
      previous: 'deck-previous'
   },

   selectors: {
      container: '.deck-container',
      slides: '.slide'
   },

   keys: {
      // enter, space, page down, right arrow, down arrow
      next: [13, 32, 34, 39, 40],
      // backspace, page up, left arrow, up arrow
      previous: [8, 33, 37, 38]
   },

   touch: {
      swipeDirection: 'horizontal',
      swipeTolerance: 60
   },

   initLockTimeout: 10000,
   hashPrefix: 'slide',
   preventFragmentScroll: true,
   setAriaHiddens: true
}

4. 事件

1）deck.beforeChange

此事件在幻灯片更改被触发但在更改发生之前触发。回调函数传递两个参数，from和to，分别等于旧幻灯片和新幻灯片的索引。如果在此处理程序中对事件调用preventDefault，则deck.change事件将不会激发，幻灯片更改也不会发生。此事件的处理程序应该只关注幻灯片更改的这一方面，是否应该发生更改并相应地防止默认。

2）deck.change

无论是通过next、prev还是go，只要当前幻灯片发生更改，就会触发此事件。回调函数传递两个参数，from和to，分别等于旧幻灯片和新幻灯片的索引。

3）deck.beforeInit

此事件在deck初始化开始时激发。此事件为希望在deck完全初始化之前修改DOM的预处理扩展提供了一个很好的钩子。在beforeInit中执行操作时，也可以停止deck.init事件的启动。这可以通过对事件对象调用lockInit来完成。init可以通过调用releaseInit来释放。

$(document).bind('deck.beforeInit', function(event) {
  event.lockInit(); // halts deck.init event
  window.setTimeout(function() {
    event.releaseInit(); // deck.init will now fire 2 seconds later
  }, 2000);
});

init事件将在options.initLockTimeout毫秒后触发，如果锁定仍然存在。

4）deck.init

此事件在deck初始化结束时激发。扩展应该实现任何依赖于此事件的处理程序中的用户可扩展选项（键绑定、元素选择器、类）的代码。与deck.js关联的本机事件应在.deckmodule事件命名空间下确定范围，如下例所示：

var $d = $(document);
$.deck.defaults.keys.myExtensionKeycode = 70; // 'h'
$d.bind('deck.init', function() {
   $d.bind('keydown.deckmyextension', function(event) {
      if (event.which === $.deck.getOptions().keys.myExtensionKeycode) {
         // Rock out
      }
   });
});