-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
119 lines (103 loc) · 4.9 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>SimpleSlideView Demo (Basic)</title>
<link rel="stylesheet" href="css/base.css">
<!-- including this will automatically enable 3D transforms where supported -->
<script src="vendor/modernizr.custom.js"></script>
</head>
<body>
<div class="island">
<h1>SimpleSlideView</h1>
<p>A nifty little <a href="http://jquery.com/">jQuery</a> or <a href="http://zeptojs.com/">Zepto</a> plugin for the simplest of sliding views.</p>
</div>
<div class="views">
<div class="view views-nav" id="nav">
<ul>
<!--
Because these anchors resolve to actual elements, we don't have to
provide a value for the 'data-pushview' or 'data-popview' attributes.
This is extra-nifty because it means our page will be functional
even if JavaScript fails to load or is disabled.
-->
<li><a href="#what" data-pushview>What it does</a></li>
<li><a href="#how" data-pushview>How it works</a></li>
<li><a href="#where" data-pushview>Where to get it</a></li>
</ul>
</div>
<div class="views-main">
<div class="view" id="what">
<div class="view-content">
<h2>What it does</h2>
<p>Sliding views let you present content in distinct, bite-sized chunks while maintaining hierarchy through the use of spacial animation. They look neat, too.</p>
<p>There are many wonderful JavaScript frameworks out there that pull this off beautifully... but they can get kind of complicated. When your needs are simple or responsive, <b>SimpleSlideView</b> may do the trick.</p>
<ul class="view-nav clearfix">
<li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
<li class="view-nav-next pull-right"><a href="#how" data-pushview>How it works</a></li>
</ul>
</div>
</div>
<div class="view" id="how">
<div class="view-content">
<h2>How it works</h2>
<p>The plugin only needs a few ingredients to work:</p>
<ul>
<li>Either <a href="http://jquery.com/">jQuery</a> or <a href="http://zeptojs.com/">Zepto</a>.</li>
<li>A containing element.</li>
<li>Some special <code>data-pushview</code> and <code>data-popview</code> attributes on elements you want to trigger slides.</li>
</ul>
<p>Then call...</p>
<pre><code>$(myContainer).simpleSlideView();</code></pre>
<p>...and bob’s your uncle!</p>
<p>Okay, there’s a <em>little</em> more to it than that (especially if you want to customize a bunch of stuff). But not much.</p>
<ul class="view-nav clearfix">
<li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
<li class="view-nav-next pull-right"><a href="#where" data-pushview>Where to get it</a></li>
</ul>
</div>
</div>
<div class="view" id="where">
<div class="view-content">
<h2>Where to get it</h2>
<p>All this (plus documentation and source files) can be yours <em>right now</em> thanks to the magic of GitHub and open source software. Isn’t life great?</p>
<ul class="view-nav clearfix">
<li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
<li class="pull-right"><a class="btn" href="https://github.com/cloudfour/SimpleSlideView">View on GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="island byline clearfix">
<p class="pull-left">Made by <a href="http://blog.cloudfour.com/simpleslideview/">Cloud Four</a></p>
<p class="pull-right"><a href="responsive.html">Responsive demo »</a></p>
</div>
<!-- this library removes the 300ms delay on browsers with touch UIs -->
<script src="vendor/fastclick.js"></script>
<script>
// "Zepto is a minimalist JavaScript library for modern browsers with a
// largely jQuery-compatible API." What this chunk of code does is
// determine which library to use (jQuery or Zepto), and then which
// scroll plugin to use. For more info, see http://zeptojs.com/#download
var useZepto = ('__proto__' in {})
, lib = useZepto ? 'zepto' : 'jquery'
, scrollPlugin = useZepto ? 'scroll' : 'scrollTo';
document.write(
'<script src=vendor/' + lib + '.min.js><\/script>' +
'<script src=vendor/' + lib + '.' + scrollPlugin + '.min.js><\/script>'
);
</script>
<!-- including the (minified) plugin, because duh -->
<script src="lib/simpleslideview.min.js"></script>
<script>
// Here is a very basic implementation. '.views' will be
// the view container, any elements therein with a class of
// 'view' will be a view, and the only default option we're
// overriding is the duration of the animations.
$('.views').simpleSlideView({ duration: 250 });
</script>
</body>
</html>