Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 112 lines (103 sloc) 4.576 kb
09fe7b3 @jeff-optimizely Second commit of Guiders JS.
jeff-optimizely authored
1 <html>
2 <head>
3 <style type="text/css">
4 body {
5 margin: 0;
6 padding: 0;
7 }
8
9 #clock {
10 position: absolute;
11 top: 300px;
12 left: 250px;
13 }
14 .stopper {
15 color: #777;
16 font-size: 77%;
17 }
18 </style>
19
20 <!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
21 <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
22 <script type="text/javascript" src="guider.js"></script>
23 <link rel="stylesheet" href="guider.css" type="text/css" />
24 </head>
25 <body>
26 <span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
27 <br />
28 <img src="clock.gif" width=150 height=150 />
29 </span>
30
31 <script type="text/javascript">
32 /**
33 * Guiders are created with guider.createGuider({settings}).
34 *
35 * You can show a guider with the .show() method immediately
36 * after creating it, or with guider.show(id) and the guider's id.
37 *
38 * guider.next() will advance to the next guider, and
39 * guider.hideAll() will hide all guiders.
40 *
41 * By default, a button named "Next" will have guider.next as
42 * its onclick handler. A button named "Close" will have
43 * its onclick handler set to guider.hideAll. onclick handlers
44 * can be customized too.
45 */
46
47 guider.createGuider({
48 buttons: [{name: "Next"}],
49 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.",
50 id: "first",
51 next: "second",
52 overlay: true,
53 title: "Welcome to Guiders.js!"
54 }).show();
55 /* .show() means that this guider will get shown immediately after creation. */
56
57 guider.createGuider({
58 attachTo: "#clock",
59 buttons: [{name: "Close"},
60 {name: "Next"}],
61 description: "For example, this guider is attached to the 12 o'clock direction relative to the attached element. The Guider.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.",
62 id: "second",
63 next: "third",
64 position: 12,
f3b23da @jeff-optimizely Added a link to Optimizely to the README.html
jeff-optimizely authored
65 title: "Guiders are typically attached to an element on the page."
09fe7b3 @jeff-optimizely Second commit of Guiders JS.
jeff-optimizely authored
66 });
67
68 guider.createGuider({
69 attachTo: "#clock",
70 buttons: [{name: "Close, then click on the clock.", onclick: guider.hideAll}],
71 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.",
72 id: "third",
73 next: "fourth",
74 position: 2,
75 title: "You can advance guiders from custom event handlers.",
092d46d @jeff-optimizely Added some width to one of the guiders in the README.
jeff-optimizely authored
76 width: 500
09fe7b3 @jeff-optimizely Second commit of Guiders JS.
jeff-optimizely authored
77 });
78
79 guider.createGuider({
80 attachTo: "#clock",
81 buttons: [{name: "Exit Guide", onclick: guider.hideAll},
82 {name: "Continue", onclick: guider.next}],
83 buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">Stop showing these. (Not implemented)</label>",
84 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.",
85 id: "fourth",
86 next: "fifth",
87 position: 7,
88 title: "Guiders can be customized.",
89 width: 600
90 });
91
92 guider.createGuider({
93 buttons: [{name: "Next"}],
94 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;\" />",
95 id: "fifth",
96 next: "finally",
97 overlay: true,
98 title: "How else can I use guiders?",
99 width: 550
100 });
101
102 guider.createGuider({
103 buttons: [{name: "Close", classString: "primary-button"}],
f3b23da @jeff-optimizely Added a link to Optimizely to the README.html
jeff-optimizely authored
104 description: "To get started, have a look at this HTML file, then emulate it for use in your own project. You can also see Guiders in action on our site, <a href=\"http://www.optimizely.com/guiders\">www.optimizely.com</a>",
09fe7b3 @jeff-optimizely Second commit of Guiders JS.
jeff-optimizely authored
105 id: "finally",
106 overlay: true,
107 title: "Great, so how do I get started?",
f3b23da @jeff-optimizely Added a link to Optimizely to the README.html
jeff-optimizely authored
108 width: 500
09fe7b3 @jeff-optimizely Second commit of Guiders JS.
jeff-optimizely authored
109 });
110 </script>
111 </body>
112 </html>
Something went wrong with that request. Please try again.