2011/11/16

deck.js 簡介

http://imakewebthings.github.com/deck.js/

deck.js 是最近很受歡迎的 slide 製作方式，使用 HTML 5 的架構來製作投影片，只要載入他的核心 JavaScript 以及布景的 CSS，就可以構成最陽春的 slide 版本，他另外提供了一些用於場景變換的 transition 以及 extension，搭配使用就有很好的轉場效果，簡單介紹一下他的使用方式。

場景變換

目前官方提供了 4 個場景。

neon

neon

none

none

swiss

swiss

web-2.0

web-2.0

只要 include 該同名的 JavaScript 以及 CSS，程式會自己偵測運行。

Transition

目前官方提供了三種特殊變換方式，只要載入同名的 CSS 檔案便可以使用。

  • fade - 淡入淡出
  • horizontal-slide - 平行切換
  • vertical-slide - 垂直切換

Extension

  • deck.goto: 按下 g 之後，可以輸入數字前往指定的 slide 頁面
  • deck.hash: 將每個有指定 id 的 slide 於網址後方加入 anchor，這樣可以便於提供別人某個指定的網址，以觀看指定的 slide 頁面
  • deck.menu: 按下 m 之後，可以將所有的 slide 切換為縮圖選擇模式（大推）
  • deck.navigation: 增加可以點選左右切換頁面的按鈕
  • deck.status: 呈現目前以及所有頁面的數字編號

相關的使用方式都在這邊：http://imakewebthings.github.com/deck.js/docs/

直接用實際的例子一步一步來完成投影片

這是最基本的 HTML 5 架構，現在要來 include 我需要的格式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
</head>
<body>

</body>
</html>

完成了初步的布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/deck.core.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.hash.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.navigation.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.menu.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.status.css">

<!-- theme and transition CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/web-2.0.css">
<link rel="stylesheet" type="text/css" href="css/deck/fade.css">

<!-- include js -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/deck/deck.core.js"></script>
<script type="text/javascript" src="js/deck/deck.hash.js"></script>
<script type="text/javascript" src="js/deck/deck.navigation.js"></script>
<script type="text/javascript" src="js/deck/deck.menu.js"></script>
<script type="text/javascript" src="js/deck/deck.status.js"></script>
<script type="text/javascript" src="js/deck/modernizr.custom.js"></script>
<script>
$(function() {
    $.deck('.slide');
});
</script>
</head>

<body class="deck-container">

<!-- navigation extension --> 
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a> <a href="#" class="deck-next-link" title="Next">&#8594;</a> 

<!-- status extension -->
<p class="deck-status"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> </p>
</body>
</html>




    
Hi, this is my first slide

first slide


    
Introduce

    
Here is the introduce

    
    
        
  • first: first content
    • 
        
  • second: second content
    • 
        
  • third: third content
    •

intro

我們指定了 .slide 給 deck 辨別，所以所有 class 等於 deck.js 的都會視為投影片，在同一個頁面你想要訊息依次出現的話，只要使用巢狀的結構，將所有內容加上 slide 的 class 屬性 就可以達成，使用一些 HTML 語法會產生不同的預設 layout，如 h1 - h6、pre、cite 等等，也可以搭配自己設計的 CSS 來布置你要的樣式，是不是很有趣呢。

於

沒有留言:

張貼留言