Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 168 lines (159 sloc) 8.328 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Slippy Documentation</title>
        <!-- Slippy core file and dependencies -->
        <script type="text/javascript" src="slippy/src/jquery.min.js"></script>
        <script type="text/javascript" src="slippy/src/jquery.history.js"></script>
        <script type="text/javascript" src="slippy/src/slippy.js"></script>
        <!-- Slippy structural styles -->
        <link type="text/css" rel="stylesheet" href="slippy/src/slippy.css"/>
        <!-- Slippy theme -->
        <link type="text/css" rel="stylesheet" href="slippy/src/slippy-pure.css"/>
        <!-- Syntax highlighting core file -->
        <script type="text/javascript" src="slippy/src/highlighter/shCore.js"></script>
        <!-- Syntax highlighting brushes, remove those you don't need -->
        <script type="text/javascript" src="slippy/src/highlighter/shBrushBash.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushCpp.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushCSharp.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushCss.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushDelphi.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushDiff.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushGroovy.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushJava.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushJScript.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushPhp.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushPlain.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushPython.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushRuby.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushScala.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushSql.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushVb.js"></script>
        <script type="text/javascript" src="slippy/src/highlighter/shBrushXml.js"></script>
        <!-- Syntax highlighting styles-->
        <link type="text/css" rel="stylesheet" href="slippy/src/highlighter/shCore.css"/>
        <link type="text/css" rel="stylesheet" href="slippy/src/highlighter/shThemeEclipse.css"/>
        <!-- Slippy init code -->
        <script type="text/javascript">
            $(function() {
                $(".slide").slippy({
                    // settings go here
                    // possible values are:
                    // - animLen, duration for default animations (0 = disabled)
                    // - animInForward, receives a slide and animates it
                    // - animInRewind, receives a slide and animates it
                    // - animOutForward, receives a slide and animates it
                    // - animOutRewind, receives a slide and animates it
                    // - baseWidth, defines the base for img resizing, if you don't want only
                    // full-width images, specify this as the pixel width of a slide so that
                    // images are scaled properly (default is 620px wide)
                    // - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
                    // - margin, the fraction of screen to use as slide margin, defaults to 0.15
                });
                SyntaxHighlighter.all();
            });
        </script>
        <!-- Custom style for this deck -->
        <style type="text/css">
            .slide.nofooter {
                border: 0;
                background: 0;
            }
        </style>
    </head>
    <body>
        <div class="slide">
            <h1>Welcome to Slippy</h1>
            <h2>Usage</h2>
            <ul>
                <li>Navigation: [Left]/[Right] arrows to move, [Space] or [Double Click] to go to next slide</li>
                <li>Overview: [ESC]/[Del]/[Tab] to view, [Click] to pick one slide</li>
                <li>Jump: Press [0-9] keys followed by [Enter] to go straight to one slide</li>
            </ul>
        </div>

        <div class="slide">
            <h1>H1's are centered by default</h1>
            <div class="vcenter">
                <h2>The class "vcenter" on anything</h2>
                <ul>
                    <li>centers it</li>
                    <li>vertically</li>
                </ul>
            </div>
        </div>

        <div class="slide" data-layout="alt">
            <h1>Layouts</h1>
            <h2>This slide uses the "alt" layout</h2>
            <p>It inherits the class "nofooter" of the layout, which allows you to style it differently, and it doesn't have the footer div that the default layout has for example</p>
            <p>By default, all slides use the default layout if it's present</p>
            <p>Layouts must have a &lt;content&gt;&lt;/content&gt; tag that will be replaced by each slide's content</p>
            <pre class="brush: html">
                <div class="slide" data-layout="alt">
                    Foo
                </div>

                <div class="layout" data-name="default">
                    <h1>Some title</h1>
                    <content></content>
                    <div class="footer">
                        Footer content
                    </div>
                </div>

                <div class="layout nofooter" data-name="alt">
                    <content></content>
                </div>
            </pre>
        </div>

        <div class="slide">
            <h1>Syntax Highlighting</h1>
            <p>Code is just pre tags with class="brush: &lt;language&gt;"</p>
            <p>The eval class combined with the js brush makes that Execute link appear on the right</p>
            <pre class="brush: js eval">
                // in eval'd block, slide is the current slide
                $(slide).css('background', '#533');
                // and node is the code block
                $(node).css('opacity', '.1');
            </pre>
            <p>Nifty feature for JS devs doing presentations</p>
            <br />
            <p>Also if you use alert() in your code, it's piped into those nicer boxes</p>
            <pre class="brush: js eval">
                alert('test');
            </pre>
            <p>This is really great to provide interaction during a presentation</p>
        </div>

        <div class="slide">
            <h1>Syntax Highlighting</h1>
            <pre class="brush: php">
                function foo($var) {
                    // this is some php code as an example
                    $foo = new Class("meh");
                    $foo->bar();
                }
            </pre>
        </div>

        <div class="slide">
            <h1>Incremental Slides</h1>
            <p>Hit next</p>
            <p class="incremental">Every "next slide" action builds up the slide</p>
            <p class="incremental">element..</p>
            <p class="incremental">by..</p>
            <p class="incremental">element.</p>
            <p class="incremental">For every element that has the incremental class on the slide.</p>
            <p class="incremental">That's it for now, enjoy!</p>
        </div>

        <div class="layout" data-name="default">
            <content></content>
            <div class="footer">
                <span class="left">Jordi Boggiano</span>
                <span class="right">Slippy on <a href="http://github.com/Seldaek/slippy/">github</a></span>
                <span class="left">Blog <a href="http://seld.be/">seld.be</a></span>
                <span class="right">Twitter <a href="http://twitter.com/seldaek">@seldaek</a></span>
                <hr class="defloat" />
            </div>
        </div>

        <div class="layout nofooter" data-name="alt">
            <content></content>
        </div>
    </body>
</html>
Something went wrong with that request. Please try again.