forked from EragonJ/Trip.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-basic.html
286 lines (276 loc) · 13.3 KB
/
demo-basic.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<!--if lt IE 7html.no-js.lt-ie9.lt-ie8.lt-ie7(lang='en')
-->
<!--if IE 7html.no-js.lt-ie9.lt-ie8(lang='en')
-->
<!--if IE 8html.no-js.lt-ie9(lang='en')
-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<!-- we have to check path first, to make sure we can reference to the right files-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Trip.js </title>
<meta name="description" content="Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities. (Based on jQuery)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="http://eragonj.github.io/Trip.js/public/img/logo-tiny.png">
<!-- styles-->
<link rel="stylesheet" href="public/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="public/vendor/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="public/vendor/highlight/github.min.css">
<link rel="stylesheet" href="public/css/base.css">
<link rel="stylesheet" href="public/css/responsive.css">
<link rel="stylesheet" href="src/trip.min.css">
<!-- 3rd parties -->
<script src="public/vendor/highlight/highlight.min.js"></script>
<script src="public/vendor/modernizr-2.6.2.min.js"></script>
<script src="public/vendor/jquery-1.8.3.min.js"></script>
<script src="public/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="public/js/global.js"></script>
<!-- tracking stuffs-->
<script src="public/vendor/social/ga.js"></script>
<script src="public/vendor/social/fb.js"></script>
<script src="public/vendor/social/twitter.js"></script>
<!-- include trip-->
<script src="src/trip.js"></script>
<link rel="stylesheet" href="public/css/demo.css">
<script src="public/js/demo-basic.js"></script>
</head>
<body>
<div id="fb-root"></div><a id="fork-button" href="https://github.com/EragonJ/Trip.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="container">
<div id="top-header" class="navbar">
<div class="navbar-inner"><a href="#" class="brand demo-index step1">Trip.js</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Home</a></li>
<li><a href="demo-basic.html">Demos</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documentations<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="doc/documentation.html">2.0+ Docs</a></li>
<li><a href="doc/documentation-1.3.html">1.3 Docs</a></li>
<li><a href="doc/index.html">JSdoc for source code</a></li>
</ul>
</li>
<li><a href="https://github.com/EragonJ/Trip.js/tags">Download</a></li>
<li><a href="https://github.com/EragonJ/Trip.js/contributors">Contributors</a></li>
<li><a href="https://github.com/EragonJ/Trip.js">Github</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="http://github.com/EragonJ">By EragonJ</a></li>
</ul>
</div>
</div>
<div class="jumbotron"><img src="public/img/logo-tiny.png" class="demo-basic-1 demo-basic-2 step1 step2 step3 step4"></div>
<div class="social-buttons clearfix">
<div data-href="http://eragonj.github.com/Trip.js/" data-layout="button_count" data-width="450" data-show-faces="false" data-send="false" class="fb-like"></div>
<div class="twitter"><a href="https://twitter.com/share" data-hashtags="trip.js" class="twitter-share-button">Tweet</a></div>
<div class="github">
<iframe src="http://ghbtns.com/github-btn.html?user=EragonJ&repo=Trip.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="20"></iframe>
</div>
</div><br>
<div class="alert alert-danger">Reminder : please turn on your inspector first because we may put logs there if needed.</div>
<div class="each-demo">
<h2>1. Configure positions ( n, e, s, w )</h2>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-1">
<pre><code class="javascript">var trip1 = new Trip([
{ sel : $(".demo-basic-1.step1"), content : "North", position : "n" },
{ sel : $(".demo-basic-1.step2"), content : "East", position : "e" },
{ sel : $(".demo-basic-1.step3"), content : "South", position : "s" },
{ sel : $(".demo-basic-1.step4"), content : "West", position : "w" }
], {
});
$(".start-demo-basic-1").on("click", function() {
trip1.start();
});</code></pre>
</div>
<div class="each-demo">
<h2>2. Change Themes</h2>
<ul id="theme-demo" class="nav nav-tabs">
<li class="active"><a href="#demo2-1" data-toggle="tab">Black and white theme</a></li>
<li><a href="#demo2-2" data-toggle="tab">Yeti theme</a></li>
</ul>
<div class="tab-content">
<div id="demo2-1" class="tab-pane active">
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-2-1">
<pre><code class="javascript">var trip2_1 = new Trip([
{ sel : $(".demo-basic-2.step1"), content : "North", position : "n" },
{ sel : $(".demo-basic-2.step2"), content : "East", position : "e" },
{ sel : $(".demo-basic-2.step3"), content : "South", position : "s" },
{ sel : $(".demo-basic-2.step4"), content : "West", position : "w" }
], {
tripTheme : "white",
onStart : function() {
$("body").css({ "background-color" : "#eee" });
},
onEnd : function() {
$("body").css({ "background-color" : "#fff" });
}
});
$(".start-demo-basic-2").on("click", function() {
trip2_1.start();
});</code></pre>
</div>
<div id="demo2-2" class="tab-pane">
<div class="alert alert-info">This is included in version >= 2.0.0</div>
<p>
Note :
Yeti theme is a special theme that is composed with header, so if you want to use this theme,
please remember to put <code>showHeader</code> to <code>true</code> and by the way, you can
use <code>{{tripIndex}}</code> and <code>{{tripTotal}}</code> to show information on header
and content ! Trip.js will automatically replace them with right information for you !
</p>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-2-2">
<pre><code class="javascript">var trip2_2 = new Trip([
{ sel : $(".demo-basic-2.step1"), content : "This is Yeti!", position : "n" },
{ sel : $(".demo-basic-2.step2"), content : "This is Yeti!", position : "e" },
{ sel : $(".demo-basic-2.step3"), content : "This is Yeti!", position : "s" },
{ sel : $(".demo-basic-2.step4"), content : "This is Yeti!", position : "w" }
], {
showHeader : true,
tripTheme : "yeti"
});
$(".start-demo-basic-2").on("click", function() {
trip2_2.start();
});</code></pre>
</div>
</div>
</div>
<div class="each-demo">
<h2 class="demo-basic-3 step1">3. You can tell Trip.js to go back to the top after finished</h2>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-3">
<pre><code class="javascript">var trip3 = new Trip([
{ sel : $(".demo-basic-3.step1"), content : "Let's fly ...", position : "e" }
], {
backToTopWhenEnded : true,
delay : 3000
});
$(".start-demo-basic-3").on("click", function() {
trip3.start();
});</code></pre>
</div>
<div class="each-demo">
<h2 class="demo-basic-4 step1 step2">4. You can show close box and show navigation</h2>
<p>Note : If you wan to manipulate Trip.js manually, set delay to -1 </p>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-4">
<pre><code class="javascript">var trip4 = new Trip([
{ sel : $(".demo-basic-4.step1"), content : "Hola!", position : "n" },
{ sel : $(".demo-basic-4.step2"), content : "Adios!", position : "s" }
], {
showNavigation : true,
showCloseBox : true,
delay : -1
});
$(".start-demo-basic-4").on("click", function() {
trip4.start();
});</code></pre>
</div>
<div class="each-demo">
<h2 class="demo-basic-5 step1 step2 step3">5. Want global events ? Here you go !!</h2>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-5">
<pre><code class="javascript">var trip5 = new Trip([
{ sel : $(".demo-basic-5.step1"), content : "Hi", position : "n" },
{ sel : $(".demo-basic-5.step2"), content : "Press ESC to stop this step !", position : "s", delay : 3000, myFunction : function() { return "this is user's function"; } },
{ sel : $(".demo-basic-5.step3"), content : "Click the close icon to see what's going on in your console log", delay: -1, showCloseBox: true }
], {
onStart : function() {
console.log("onStart");
},
onEnd : function() {
console.log("onEnd");
},
onTripStop : function() {
console.log("onTripStop");
},
onTripChange : function(i, tripData) {
if ( i === 1 ) {
console.log("You can put your own function or data in tripData andaccess it onTripChange !");
console.log("current tripIndex : " + i);
console.log("current tripData : ", tripData);
console.log("User's function : " + tripData.myFunction());
}
},
onTripClose: function(i) {
console.log("You close the trip at index : ", i);
}
});
$(".start-demo-basic-5").on("click", function() {
trip5.start();
});</code></pre>
</div>
<div class="each-demo">
<h2 class="demo-basic-6 step1 step2">6. Use local events if you want !</h2>
<div class="alert alert-info">This is included in version >= 2.0.0</div>
<p>Note: we will use global one if not found.</p>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-6">
<pre><code class="javascript">var trip6 = new Trip([
{
sel: $('.demo-basic-6.step1'),
content: 'onTripStart will be called when entering this trip',
onTripStart: function(tripIndex) {
console.log('onTripStart : ', tripIndex);
},
onTripEnd: function(tripIndex) {
console.log('onTripEnd : ', tripIndex);
}
},
{
sel: $('.demo-basic-6.step2'),
content: 'We will use global onTripStart if there is no local one'
onTripEnd: function(tripIndex) {
console.log('onTripEnd : ', tripIndex);
}
}
], {
onTripStart: function(tripIndex) {
console.log('default onTripStart : ', tripIndex);
}
});
$('.start-demo-basic-6').on('click', function() {
trip6.start();
});</code></pre>
</div>
<div class="each-demo">
<h2 class="demo-basic-7 step1 step2">7. You can also highlight something</h2>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-7">
<pre class="demo-basic-7 step3"><code class="javascript">var trip7 = new Trip([
{ sel : $(".demo-basic-7.step1"), content : "Highlight this", expose : true },
{ sel : $(".demo-basic-7.step2"), content : "No highlight" },
{ sel : $(".demo-basic-7.step3"), content : "Highlight that", expose : true }
], {
delay : 3000
});
$(".start-demo-basic-7").on("click", function() {
trip7.start();
});</code></pre>
</div>
<div class="each-demo">
<h2 class="demo-basic-8 step1 step2 step3 step4">8. Add animations for each trip !</h2>
<h3 class="demo-basic-8 step5 step6 step7 step8">Powered by animate.css, we now support lots of animations !</h3>
<p>Allowed values are <code>bounce</code>,<code>shake</code>,<code>tada</code>,<code>fadeIn</code>,<code>fadeInUp</code>,<code>fadeInDown</code>,<code>fadeInLeft</code>,<code>fadeInRight</code>,<code>fadeInUpBig</code>,<code>fadeInDownBig</code>,<code>fadeInLeftBig</code>,<code>fadeInRightBig</code>,<code>bounceIn</code>,<code>bounceInDown</code>,<code>bounceInUp</code>,<code>bounceInLeft</code>,<code>bounceInRight</code>,<code>rotateIn</code>,<code>rotateInDownLeft</code>,<code>rotateInDownRight</code>,<code>rotateInUpLeft</code>,<code>rotateInUpRight</code></p>
<input type="button" value="Run Demo" class="btn btn-primary btn-small start-demo-basic-8">
<pre class="demo-basic-8"><code class="javascript">var trip8 = new Trip([
{ sel : $(".demo-basic-8.step1"), content : "hi"},
{ sel : $(".demo-basic-8.step2"), content : "hi", animation: 'bounce'},
{ sel : $(".demo-basic-8.step3"), content : "hi", animation: 'shake'},
{ sel : $(".demo-basic-8.step4"), content : "hi", animation: 'fadeIn'},
{ sel : $(".demo-basic-8.step5"), content : "hi", animation: 'fadeInUp'},
{ sel : $(".demo-basic-8.step6"), content : "hi", animation: 'fadeInDown'},
{ sel : $(".demo-basic-8.step7"), content : "hi", animation: 'fadeInLeft'},
{ sel : $(".demo-basic-8.step8"), content : "hi", animation: 'rotateInUpRight'}
], {
delay : 3000,
animation: 'tada'
});
$(".start-demo-basic-8").on("click", function() {
trip8.start();
});</code></pre>
</div>
<div class="each-demo">
<h3>δ With the flexibility of Trip.js, the only limitation is your imagination ! :P</h3>
</div>
</div>
</body>
</html>