-
Notifications
You must be signed in to change notification settings - Fork 33
/
responsive.html
192 lines (167 loc) · 7.82 KB
/
responsive.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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!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 (Responsive)</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- including this will automatically enable 3D transforms where supported -->
<script src="vendor/modernizr.custom.js"></script>
</head>
<body>
<div class="island masthead">
<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 clearfix">
<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 class="is-active" 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 is-active" 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="index.html">Basic 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>
// This is a more complex example. In this case, we want to use a
// sliding view for layouts smaller than 768 px/pt, but a different
// type of navigation for larger layouts.
// First, let's define the variables we'll need and the initial
// values of whichever ones we can right now.
var $window = $(window) // For viewport width and resizing
, $viewContainer = $('.views') // Our view container
, options = { // SimpleSlideView plugin options
// If the viewport is currently 768px or wider, do not
// activate the plugin immediately. Otherwise, go for it!
deferOn: ($window.width() >= 768),
duration: 250 // Animation duration
}
, slideView; // We wait to initialize the plugin
// Next, we bind some events to the view container. This will
// let us change the behavior of the page depending on whether
// or not the plugin is activated or deactivated.
// We're binding these events _before_ we initialize the plugin
// because otherwise we can't detect the 'slideViewDeferred'
// event, which is only fired when the plugin is first initialized.
$viewContainer
// This function is called if the plugin is initialized but
// not activated immediately, or if the plugin is turned off.
.on('slideViewDeferred slideViewOff', function () {
// Really barebones "tab" interface for when sliding views
// are turned off. I would not recommend using this outside
// the context of this demo... consider it a placeholder for
// "your large layout logic here".
$viewContainer.addClass('demo-active');
$('a[data-pushview]').on('click', function (event) {
var href = $(this).attr('href')
, $target = $(href)
, $nav;
if ($target.length) {
event.preventDefault();
$target.addClass('is-active');
$nav = $('#nav');
$nav.find('.is-active').removeClass('is-active');
$nav.find('[href="' + href + '"]').addClass('is-active');
$target.siblings().removeClass('is-active');
}
});
})
// This is called when the plugin is _about_ to activate.
.on('slideViewBeforeOn', function () {
$viewContainer.removeClass('demo-active');
// Remove the event we bound to these elements in the
// previous function so that SimpleSlideView can use
// them without conflicts.
$('a[data-pushview]').off('click');
});
// Now that we've bound our events, we're ready to initialize
// the plugin! Yay!
// We are storing it to the 'slideView' variable we created
// earlier. This will let us use the plugin's methods, which
// we'll need to activate/deactivate it if the window size
// changes.
slideView = $viewContainer.simpleSlideView(options);
// Finally, we bind a function to the window's 'resize' event
// so that we can turn the plugin on and off if/when the size
// of the window changes.
$window.on('resize', function(){
slideView.toggle($window.width() < 768);
});
// For the sake of simplicity, this demo uses the window size
// to determine the state of the plugin. When used in production,
// I recommend basing this off of the behavior of elements instead.
// See: http://blog.cloudfour.com/behavioral-breakpoints/
</script>
</body>
</html>