forked from sorich87/bootstrap-tour
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (231 loc) · 10.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Tour, easy product tours with Bootstrap from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="deps/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
h1 {
font-size: 54px;
margin-bottom: 9px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
}
h3 {
font-weight: 500;
}
</style>
<link href="deps/bootstrap-responsive.css" rel="stylesheet">
<link href="deps/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<a href="https://github.com/sorich87/bootstrap-tour">
<img id="gitban-tour" style="position: fixed; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub">
</a>
<div class="container">
<header id="overview">
<h1 id="reflex-mode">Bootstrap Tour</h1>
<p class="lead">Quick and easy way to build your product tours with Twitter Bootstrap Popovers.</p>
<p>Note: This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.</p>
<a href="#" class="btn restart">Restart tour</a>
</header>
<div class="row">
<div class="span9 content">
<h2 id="usage">Usage</h2>
<h3>1. Link to the JavaScript dependencies.</h3>
<pre class="prettyprint">
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.js"></script>
</pre>
<h3>2. Initialize the tour</h3>
<pre class="prettyprint">var tour = new Tour();</pre>
<h3>3. Add steps</h3>
<pre class="prettyprint">
tour.addStep({
element: "", /* html element next to which the step popover should be shown */
title: "", /* title of the popover */
content: "" /* content of the popover */
});
</pre>
<p>You can add as many steps as you want, but not too much or your
users will fell asleep!</p>
<h3>4. Start the tour</h3>
<pre class="prettyprint">tour.start();</pre>
<h2 id="options">Options</h2>
<h3>Useful Methods</h3>
<p>Bootstrap Tour saves the current step and will not
display the tour again to users who have already completed it.</p>
<p>If, for some reasons, you want to force the tour to be
displayed, pass <code>true</code> to the <code>start()</code>
method.</p>
<pre class="prettyprint">tour.start(true);</pre>
<p>Sometimes you want to end the tour prematurely:</p>
<pre class="prettyprint">tour.end();</pre>
<p>Or skip to the next step:</p>
<pre class="prettyprint">tour.next();</pre>
<p>Or go back to the previous step:</p>
<pre class="prettyprint">tour.prev();</pre>
<p>Or skip to a specific step:</p>
<pre class="prettyprint">tour.showStep(i); // i is the position of the step in the tour, starting from 0 for the first step</pre>
<p>Or restart the tour after it ended:</p>
<pre class="prettyprint">tour.restart();</pre>
<p>Or verify if the tour ended:</p>
<pre class="prettyprint">tour.ended();</pre>
<h3>Initialization Options</h3>
<p>Default options:</p>
<pre class="prettyprint">
var tour = new Tour({
name: "tour",
keyboard: true,
useLocalStorage: false,
afterGetState: function (key, value) {},
afterSetState: function (key, value) {},
onStart: function (tour) {},
onEnd: function (tour) {},
onShow: function (tour) {},
onHide: function (tour) {}
});
</pre>
<h4><code>name</code></h4>
<p>This option is used to build the name of the
cookie or localStorage item where the tour state is stored. You can initialize several
tours with different names in the same page and application.</p>
<h4><code>keyboard</code></h4>
<p>This option set the left/right arrow navigation. The default is true.</p>
<h4><code>useLocalStorage</code></h4>
<p>You can choose to save the tour state with localStorage instead of
cookie. If you decide, you can safely remove the jquery.cookie plugin from the
dependencies</p>
<h4><code>afterGetState</code> and <code>afterSetState</code></h4>
<p>You may want to do something right after
Bootstrap Tour read or write the state. Just pass functions to
<code>afterGetState</code> or <code>afterSetState</code>.</p>
<p>Your functions can have two parameters:</p>
<dl>
<dt>key</dt>
<dd>Contains the name of the state being saved. It can be
<code>current_step</code> (for the state where the latest step
the visitor viewed is saved) or <code>end</code> (for the state
which is saved when the user complete the tour). Note that
Bootstrap Tour prepends the key with <code>tour_</code> when
saving the state.</dd>
<dt>value</dt>
<dd>The value of the state been saved. Can be the index of the
current step if the key is <code>current_step</code>, or
<code>yes</code> if the key is <code>end</code>.</dd>
</dl>
<p>A simple example if to send a post request to your server each
time there is a change:</p>
<pre class="prettyprint">
var tour = new Tour({
afterSetState: function (key, value) {
jQuery.post("/some/path", value);
}
});
</pre>
<h4><code>onStart</code></h4>
<p>Function to execute when the tour starts.</p>
<h4><code>onEnd</code></h4>
<p>Function to execute when the tour ends.</p>
<h4><code>onShow</code></h4>
<p>Function to execute right before each step is shown.</p>
<h4><code>onHide</code></h4>
<p>Function to execute right before each step is hidden.</p>
<h3>Step Options</h3>
<p>Default options:</p>
<pre class="prettyprint">
tour.addStep({
path: "", // string
element: "", // (required) jQuery selector
placement: "right", // string|function
container: "body" //string|false
title: "", // string|function
content: "", // string|function
next: 0, // number
prev: 0, // number
animation: true, // boolean
onShow: function (tour) {}, // function
onHide: function (tour) {} // function
});
</pre>
<dl>
<dt>path</dt>
<dd>Path to the page on which the step should be shown. this
allows you to build tours that span several pages!</dd>
<dt>element</dt>
<dd>HTML element on which the step popover should be shown.</dd>
<dt>placement</dt>
<dd>How to position the popover - top | bottom | left |
right.</dd>
<dt>container</dt>
<dd>Attachment of popover - optional: pass an element [string] to append the popover to,
default=false appends the popover after the 'element' above. Helpful for IE.</dd>
<dt>title</dt>
<dd>Step title</dd>
<dt>content</dt>
<dd>Step content</dd>
<dt>next</dt>
<dd>Index of the step to show after this one, starting from 0 for the
first step of the tour. -1 to not show the link to next step.
By default, the next step (in the order you added
them) will be shown.
<br /><em>This option should be used in conjunction with "prev".</em></dd>
<dt>prev</dt>
<dd>Index of the step to show before this one, starting from 0 for the
first step of the tour. -1 to not show the link to previous step.
By default, the previous step (in the order you added
them) will be shown.
<br /><em>This option should be used in conjunction with "next".</em></dd>
<dt>animation</dt>
<dd>Apply a css fade transition to the tooltip.</dd>
<dt>onShow</dt>
<dd>Function to execute right before the step is shown. It overrides the global onShow option.</dd>
<dt>onHide</dt>
<dd>Function to execute right before the step is hidden. It overrides the global onHide option.</dd>
<dt>options</dt>
<dd>(Object) Extend the options for one step.</dd>
<dt>reflex</dt>
<dd>(Bool) Enable the reflex mode : you can click on the element for continue the tour.</dd>
</dl>
<h2 id="contributing">Contributing</h2>
<p><a href="https://github.com/sorich87/bootstrap-tour/issues">Bug
reports</a> and <a
href="https://github.com/sorich87/bootstrap-tour/pulls">pull
requests</a> are much needed!
<h2 id="license">License</h2>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
Well, the same licenses as Bootstrap. We are lazy! ;)</p>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="deps/jquery.js"></script>
<script src="deps/google-code-prettify/prettify.js"></script>
<script src="deps/bootstrap-tooltip.js"></script>
<script src="deps/bootstrap-popover.js"></script>
<script src="deps/bootstrap-alert.js"></script>
<script src="deps/jquery.cookie.js"></script>
<script src="bootstrap-tour.js"></script>
<script src="deps/example-tour.js"></script>
</body>
</html>