建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:22收藏

简介


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

(下载的附件中附有DEMO)


更多 HTML 演示插件:👉  [ 详情 ]


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


模块


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
      }
   });
});



相关链接


官网地址 : http://imakewebthings.com/deck.js/docs/

GitHub 地址 :  https://github.com/imakewebthings/deck.js

易助科技网文档及效果演示地址:  http://demo.easyzone.net.cn/plugin/deck/introduction/index.html

易助科技网效果演示地址: http://demo.easyzone.net.cn/plugin/deck/boilerplate.html

易助科技网效果演示地址1:  http://demo.easyzone.net.cn/plugin/deck/test/index.html