/
README.html
171 lines (155 loc) · 5.79 KB
/
README.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
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.guider_description a, .guider_description a:visited {
color: #1054AA;
}
#clock {
border: 2px solid #333;
height: 200px;
margin-left: 100px;
position: relative;
text-align: center;
width: 300px;
}
.stopper {
color: #777;
font-size: 77%;
}
</style>
<!-- guiders.js requires jQuery as a prerequisite. Be sure to load guiders.js AFTER jQuery. -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="guiders.js"></script>
<link rel="stylesheet" href="guiders.css" type="text/css" />
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="clock" onclick="guiders.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!-- The following is an alternate way to create your guiders in the HTML itself -->
<!-- (This is new with version 2.0.0) -->
<div id="guider2" class="guider" data-attachTo="#clock" data-position="12">
<div class="guiders_content">
<h1 class="guiders_title">Guiders are typically attached to an element on the page.</h1>
<p class="guiders_description">
For example, this guider is attached to the 12 o'clock direction relative to the attached element. The Guiders.js API uses a clock model to determine where the guider should be placed.<br/><br/>Attaching a guider to an element focuses user on the area of interest.
</p>
<div class="guiders_buttons_container">
<div>Close</div>
<div>Next</div>
</div>
</div>
<div class="guiders_arrow"></div>
</div>
<script type="text/javascript">
/**
* Guiders are created with guiders.createGuider({settings}).
*
* You can show a guider with the .show() method immediately
* after creating it, or with guiders.show(id) and the guider's id.
*
* guiders.next() will advance to the next guider, and
* guiders.hideAll() will hide all guiders.
*
* By default, a button named "Next" will have guiders.next as
* its onclick handler. A button named "Close" will have
* its onclick handler set to guiders.hideAll. onclick handlers
* can be customized too.
*
* An alternate method for creating guiders is to create them in the
* HTML, then call $("#guider3").guider(options);
*/
guiders.createGuider({
buttons: [{name: "Next"}],
description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
id: "guider1",
next: "guider2",
overlay: true,
title: "Welcome to Guiders.js!"
}).show();
/**
* .show() means that this guider will get shown immediately after creation.
*
* Using .show() is one way of starting your guiders.
*
* Another way is by directing the user to a special URL with the guider id in
* its hash tag, such as:
*
* http://www.local.com/README.html#guider=first
*
* This makes it easy to only show guiders for new users. It can also be used
* to route people among multiple web pages and still keep showing the guiders.
*/
// Alternate method of creating guiders allows you to keep the buttons and description in the HTML:
$("#guider2").guider({
next: "guider3"
});
guiders.createGuider({
attachTo: "#clock",
buttons: [{name: "Close, then click on the clock.", onclick: guiders.hideAll}],
description: "Custom event handlers can be used to hide and show guiders. This allows you to interactively show the user how to use your software by having them complete steps. To try it, click on the clock.",
id: "guider3",
next: "guider4",
position: 3,
title: "You can advance guiders from custom event handlers.",
width: 500
});
guiders.createGuider({
attachTo: "#clock",
buttons: [{name: "Exit Guide", onclick: guiders.hideAll},
{name: "Back"},
{name: "Continue", onclick: guiders.next}],
buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">Optional checkbox. (You can add one.)</label>",
description: "Other aspects of the guider can be customized as well, such as the button names, button onclick handlers, and dialog widths. You'd also want to modify the CSS to your own project's style.",
id: "guider4",
next: "guider5",
position: 7,
title: "Guiders can be customized.",
width: 600
});
guiders.createGuider({
buttons: [{name: "Next"}],
description: "Guiders can also be used to introduce of brand new features to existing users. Here is an example of a guider in Gmail. Google's CSS calls this a promo, likely short for promotional box. <br/><br/> <img src=\"promo_gmail.png\" style=\"border: 1px solid #333;\" />",
id: "guider5",
next: "guider6",
overlay: true,
title: "How else can I use guiders?",
width: 550
});
guiders.createGuider({
buttons: [{name: "Close", classString: "primary-button"}],
description: "To get started, have a look at this HTML file, then emulate it for use in your own project. Enjoy!",
id: "guider6",
overlay: true,
title: "Great, so how do I get started?",
width: 500
});
</script>
</body>
</html>