summaryrefslogtreecommitdiff
path: root/deck.js/samples/deck-step.html
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
committerChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
commit5a774ef6f3b38b19b26913a34b1388530c72334e (patch)
tree543127427771d75f652fc9e726cc39aa1a72571c /deck.js/samples/deck-step.html
Initial Commit
Diffstat (limited to 'deck.js/samples/deck-step.html')
-rw-r--r--deck.js/samples/deck-step.html174
1 files changed, 174 insertions, 0 deletions
diff --git a/deck.js/samples/deck-step.html b/deck.js/samples/deck-step.html
new file mode 100644
index 0000000..36a84d0
--- /dev/null
+++ b/deck.js/samples/deck-step.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>deck.step.js test/demo</title>
+
+ <meta name="description" content="deck.*.js">
+ <meta name="author" content="Rémi Emonet">
+ <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+
+ <!-- Core and extension CSS files -->
+ <link rel="stylesheet" href="../core/deck.core.css">
+ <link rel="stylesheet" href="../extensions/status/deck.status.css">
+ <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+
+ <!-- Style theme. More available in /themes/style/ or create your own. -->
+ <link rel="stylesheet" href="../themes/style/neon.css">
+
+ <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+ <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+
+ <script src="../modernizr.custom.js"></script>
+
+ <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+ <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+
+ <!-- Deck Core and extensions -->
+ <script src="../core/deck.core.js"></script>
+ <script src="../extensions/hash/deck.hash.js"></script>
+ <script src="../extensions/status/deck.status.js"></script>
+ <script src="../extensions/fit/deck.fit.js"></script>
+ <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+ <script src="../extensions/step/deck.step.js"></script>
+
+
+ <style type="text/css">
+ .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+ .slide h1 {font-size: 3em;}
+ .slide h1 b {color: #0F0;}
+ .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+ .slide .demo {font-size: .3em;}
+ </style>
+ </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+ <h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>step</b> extension
+ <br/><em>use right arrow to move on</em>
+ </h1>
+</section>
+
+<section class="slide">
+ <h2>Nested deck.js slides</h2>
+ <ul>
+ <li>Not an extension (in core deck.js)</li>
+ <li>Just have an element with the “slide” class…</li>
+ <li>… and it will appear (hit the right arrow now)</li>
+ <li class="slide">Hey! I appeared! (go on)</li>
+ <li class="slide">The gray-ish style is part of the theme</li>
+ </ul>
+</section>
+<section class="slide">
+ <h2>Why the step extension?</h2>
+ <ul>
+ <li class="slide">
+ <span class="slide">Nested slides</span>
+ <span class="slide">are cool</span>
+ <span class="slide">and useful</span>
+ </li>
+ <li class="slide">But there is a problem</li>
+ <li class="slide">
+ <span class="slide">Navigating</span>
+ <span class="slide">is</span>
+ <span class="slide">annoying</span>
+ <span class="slide">with</span>
+ <span class="slide">nesting</span>
+ <span class="slide">!!!</span>
+ </li>
+ <li class="slide">Example:<br/> Try using the left arrow to go back to previous slide</li>
+ <li class="slide">Probably annoying!?</li>
+ <li class="slide">Now try hitting the up arrow</li>
+ <li class="slide">More on the next slide…</li>
+ </ul>
+</section>
+<section class="slide">
+ <h2>The “step” extension</h2>
+ <br/>
+ <ul>
+ <li>Adds new key shortcuts</li>
+ <ul>
+ <li>up arrow: previous top level slide</li>
+ <li>down arrow: next top level slide</li>
+ </ul>
+ </ul>
+</section>
+</section>
+<section class="slide">
+ <h2>More “step”<span class="demo"> </span></h2>
+ <br/>
+ <ul>
+ <li class="slide">Other stuff… not visible
+ <ul>
+ <li>Defaults to not counting nested slides<br/>   (if you use the status extension)</li>
+ <li>Add notifications events to nested slides when the parent gets activated (for animations)</li>
+ <li>(The title ends in "21", see why in the source)</li>
+ </ul>
+ </li>
+ <!-- demotoshow shows a message (specific to this page) -->
+ <div class="demotoshow1 slide"></div> <!-- any "slide" receives a notification when the toplevel gets shown -->
+ <div class="demotoshow2 onshowtoplevel"></div> <!-- "onshowtoplevel" is a second default class that gets inited -->
+ <!-- the first of these two is a "slide", so it will get activated when "right arrow" is pressed, and the previous part will get gray -->
+ <!-- the second one is not a "slide", so it won't influence the navigation at all -->
+ </ul>
+</section>
+<section class="slide">
+ <h2>Browser support</h2>
+ <ul>
+ <li>Should be ok</li>
+ </ul>
+</section>
+
+<!-- DEMO: step -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+ <span class="deck-status-current"></span>
+ /
+ <span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+
+ // we register the listeners before call the deck init
+ $('.demotoshow1').bind('deck.toplevelBecameCurrent', function() {
+ $(".demo").html($(".demo").html()+"1");
+ });
+ $('.demotoshow2').bind('deck.toplevelBecameCurrent', function() {
+ $(".demo").html($(".demo").html()+"2");
+ });
+
+ $.deck('.slide', {
+ // fitMarginX:100, fitMarginY:100,
+ // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+ });
+});
+</script>
+</div>
+</body>
+</html>