-
Notifications
You must be signed in to change notification settings - Fork 240
/
demo.html
125 lines (101 loc) · 4.76 KB
/
demo.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
<!DOCTYPE html>
<!--
* Markup for jQuery Joyride Plugin 1.0.4
* www.ZURB.com/playground
* Copyright 2011, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-->
<head>
<meta charset="utf-8" />
<title>Joyride Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Attach our CSS -->
<link rel="stylesheet" href="../joyride-1.0.5.css">
<link rel="stylesheet" href="demo-style.css">
<link rel="stylesheet" href="mobile.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>ZURB's Joyride Feature Tour Plugin</h1>
<a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin">View Docs + Playground for Joyride</a>
<hr>
</div>
</div>
<br><br>
<div class="row">
<div class="six columns">
<h2 id="numero1">Point Out Those New Features!</h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">
<img id="numero5" src="http://placehold.it/430x200">
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="twelve columns">
<h3 id="numero3">Get the Most Out of Your App!</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="four columns">
<img src="http://placehold.it/280x120">
</div>
<div class="eight columns">
<h3 id="numero2">Customize Each Stop Along the Way</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="six columns">
<h4>Make Every Click Count</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">
<img src="http://placehold.it/430x200">
</div>
</div>
<br><br><br><br>
<div style="float:right">It even works <span id="numero4">here.</span></div>
</div>
<!-- Tip Content -->
<ol id="joyRideTipContent">
<li data-id="numero1" data-text="Next" class="custom">
<h2>Stop #1</h2>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-text="Next" data-options="tipLocation:top;tipAnimation:fade">
<h2>Stop #2</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-id="numero3" data-text="Next" data-options="tipLocation:top right;">
<h2>Stop #3</h2>
<p>It works right aligned.</p>
</li>
<li data-id="numero4" data-text="Next">
<h2>Stop #4</h2>
<p>It works when tips run off the viewport.</p>
</li>
<li data-id="numero5" data-text="Close">
<h2>Stop #5</h2>
<p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
</li>
</ol>
<!-- Run the plugin -->
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.cookie.js"></script>
<script type="text/javascript" src="../modernizr.mq.js"></script>
<script type="text/javascript" src="../jquery.joyride-1.0.5.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#joyRideTipContent').joyride();
});
</script>
</body>
</html>