Skip to content
Newer
Older
100644 501 lines (387 sloc) 18.6 KB
78a2961 @wbotelhos Using DTD HTML 5.
authored Jun 11, 2011
1 <!DOCTYPE html>
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
2
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
6 <meta http-equiv="Pragma" content="no-cache">
7 <meta http-equiv="Expires" content="-1">
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 25, 2010
8
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
9 <title>jQuery Stepy - A Wizard Plugin</title>
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 26, 2010
10
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
11 <link type="text/css" rel="stylesheet" href="css/jquery.stepy.css" />
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
12
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
13 <script type="text/javascript" src="js/jquery.min.js"></script>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
14
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
15 <!-- Optionaly -->
16 <script type="text/javascript" src="js/jquery.validate.min.js"></script>
17
f07384f @wbotelhos + Fixed the index number given to Stepy binded by class without id.
authored Dec 4, 2011
18 <script type="text/javascript" src="js/jquery.stepy.min.js"></script>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
19
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
20 <style type="text/css">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
21 /* This CSS does not belong to the plugin. */
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
22 body { background: url('img/background.gif'); font: normal 11px verdana; }
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
23
24 a { color: #2C8CBD; text-decoration: none; }
25 a:hover { color: #48A5D4; }
26
27 a#coffee {
28 background: url('img/coffee.png') 6px 2px no-repeat #DC5; border: 1px solid #D9C640; color: #FFF; display: block; float: right; font-size: 10px; font-weight: bold; letter-spacing: .9px; margin-right: 9px; padding: 4px 5px 4px 26px; text-decoration: none;
29 -khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
30 }
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
31 a#coffee:hover { text-decoration: underline; }
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
32
33 span.comment { color: #999; font: 12px monospace; letter-spacing: .1px; margin-bottom: 7px; margin-top: 5px; }
34
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
35 div#content { background-color: #FFF; border: 1px solid #DEDEDE; box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4); margin: 0 auto; padding: 15px; width: 1100px; min-height: 510px; }
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
36
37 div.description { color: #555; letter-spacing: .1px; margin-bottom: 15px; margin-top: 10px; text-align: left; }
38
39 div.description-code { color: #555; letter-spacing: .1px; margin-bottom: 10px; text-indent: 7px; }
40
41 div#menu-feature { color: #AAA; float: left; margin-bottom: 20px; }
42 div#menu-feature a { float: left; width: 120px }
43 div#menu-feature a.disabled { color: #999; cursor: default; }
44 div#menu-feature a.selected { color: #2C8CBD; cursor: default; font-weight: bold; }
45
46 div#footer { clear: both; height: 25px; margin-top: 5px; width: 100%; }
47 div#footer div#copy { margin: 0 auto; text-align: center; width: 1100px; }
48
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
49 div#header { margin: 0 auto; padding-left: 20px; width: 1130px; }
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
50
51 div#menu { color: #AB9927; font: bold 14px 'Lucida Grande', 'Helvetica', 'Times New Roman', serif; text-shadow: 1px 1px 1px #FFF; text-transform: uppercase; }
52 div#menu a { color: #EA9C00; font: bold 10px verdana; letter-spacing: .9px; text-decoration: none; }
53 div#menu a:hover { color: #DC5; font-weight: bold; letter-spacing: .9px; text-decoration: underline; }
54
55 div.session { clear: both; font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 18px; margin-top: 24px; text-align: left; }
56 div.session-first { clear: both; font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 18px; text-align: left; }
57 div.session-mini { font: bold 10px verdana; color: #444; letter-spacing: .7px; margin-top: 17px; }
58
59 div.source { background: #F8F8FF; border: 1px solid #EFEFEF; border-left: 3px solid #CCC; clear: both; color: #444; font: 12px monospace; border-radius: 2px; letter-spacing: .1px; margin-bottom: 7px; margin-top: 15px; padding: 7px; width: 1081px; -khtml-border-radius: 2px; -moz-border-radius: 2px; -opera-border-radius: 2px; -webkit-border-radius: 2px; }
60 div.source div.comment { color: #777; font: 9px verdana; letter-spacing: 0.4px; margin-bottom: 9px; text-align: left; }
61
62 div#title { font: bold 17px verdana; color: #269; letter-spacing: .7px; margin-bottom: 10px; text-align: left; }
63 div#title span { color: #777; font: 10px verdana; }
64
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
65 span#version { color: #777; font: 10px verdana; }
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
66
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
67 /* Custom */
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
68 form#target fieldset img { margin-top: 10px; }
69
70 div#title-target { height: 25px; margin-left: 215px; margin-top: 2px; }
71 div#title-target ul.stepy-titles li { font-size: 12px; padding: 4px; }
7f1eeb0 @wbotelhos Changed and resumed color of style.
authored Jun 11, 2011
72 div#title-target ul.stepy-titles li:hover { color: #BBB; }
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
73 div#title-target ul.stepy-titles li.current-step { color: #369; }
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
74
75 /* Example of dynamic class name */
76 p.default-buttons { margin-top: 30px; }
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
77 </style>
ee8c08a @wbotelhos Added example with onBack and onNext callback.
authored Jan 30, 2011
78
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
79 <script type="text/javascript">
80 // This code does NOT belong the plugin. See the example code at the bottom of this page.
81 var _gaq = _gaq || [];
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
82 _gaq.push(['_setAccount', 'UA-194992347-10']);
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
83 _gaq.push(['_trackPageview']);
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
84
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
85 (function() {
86 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
87 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
88 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
89 })();
90 </script>
91 </head>
92 <body>
93 <div id="header">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
94 <div id="title">
95 <a href="http://wbotelhos.com/stepy">jQuery Stepy - A Wizard Plugin</a>
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
96 <span>(current version: 1.1.0)</span>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
97 </div>
98
99 <div id="menu">
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
100 <a href="http://github.com/downloads/wbotelhos/stepy/jquery.stepy-1.1.0.zip" target="_blank">Download</a> |
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
101 <a href="http://github.com/wbotelhos/stepy" target="_blank">Github</a> |
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
102 <a href="http://wbotelhos.com/stepy/changelog.markdown" target="_blank">Change Log</a> |
103 <a href="http://wbotelhos.com/stepy/README.markdown" target="_blank">Readme</a> |
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
104 <a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin" target="_blank">Article</a> |
105 <a href="http://wbotelhos.com/stepy/LICENSE.txt" target="_blank">License</a> |
106 <a href="http://www.wbotelhos.com/stepy/who.html" target="_blank">Who is using</a> |
107 <a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
108 <a href="http://www.wbotelhos.com/labs" target="_blank" style="color: #000;">yLab</a>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
109 </div>
110
111 <a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=X8HEP2878NDEG&amp;item_name=jQuery%20Stepy" target="_blank">buy me a coffee</a>
112
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
113 <div class="description">jQuery <strong>Stepy</strong> is a plugin based on FormToWizard that generates a customizable wizard.</div>
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
114 </div>
115
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
116 <div id="content">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
117 <div id="checkbox-default-demo" class="session-first">With default options using checkbox:</div>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
118
119 <form id="default">
120 <fieldset title="Step 1">
121 <legend>description one</legend>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
122 <label>User:</label> <input type="text" value="wbotelhos" size="40" disabled="disabled" /> <!-- Disabled fields are not focused. -->
123 <label>E-mail:</label> <input type="text" size="40" />
124 <label>Password:</label> <input type="password" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
125 </fieldset>
126
127 <fieldset title="Step 2">
128 <legend>description two</legend>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
129 <label>Nick Name:</label> <input type="text"size="30" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
130 <label>Bio:</label> <textarea rows="5" cols="60"></textarea>
131 </fieldset>
132
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
133 <input type="submit" class="finish" value="Finish!" />
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
134 </form>
135
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
136 <div class="source">
137 $('#default').stepy();
138 </div>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
139
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
140 <div id="custom-demo" class="session">A custom form in a validation style:</div>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
141
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
142 <form id="custom">
143 <fieldset title="Thread 1">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
144 <legend>description one</legend>
145
146 <label>User:</label>
f31afdc @wbotelhos Put disabled and hidden together.
authored Oct 30, 2011
147 <!-- Hidden fields are not focused. -->
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
148 <input type="hidden" name="hidden" />
f31afdc @wbotelhos Put disabled and hidden together.
authored Oct 30, 2011
149
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
150 <!-- Disabled fields are not validated. -->
151 <input type="text" value="wbotelhos" size="40" name="user" disabled="disabled" />
152
153 <label>E-mail:</label>
154 <input type="text" size="40" name="email" />
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
155 <input type="checkbox" name="checked" /> Checked?
156
157 <label>Newsletter?</label>
158 <input type="radio" name="newsletter" /> Yep
159 <input type="radio" name="newsletter" /> Nop
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
160
161 <label>Password:</label>
162 <input type="password" name="password" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
163 </fieldset>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
164
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
165 <fieldset title="Thread 2">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
166 <legend>description two</legend>
167
168 <label>Nick Name:</label>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
169 <input type="text" size="30" />
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
170
171 <label>Bio:</label>
172 <textarea name="bio" rows="5" cols="60"></textarea>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
173 </fieldset>
174
175 <fieldset title="Thread 3">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
176 <legend>description three</legend>
177
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
178 <label>Birthday:</label>
179 <select name="day">
180 <option></option>
181 <option>23</option>
182 </select>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
183
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
184 <select>
185 <option>10</option>
186 </select>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
187
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
188 <select>
189 <option>1984</option>
190 </select>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
191
192 <label>Site:</label>
193 <input type="text" name="site" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
194 </fieldset>
195
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
196 <input type="submit" class="finish" value="Finish!" />
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 11, 2011
197 </form><br/>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
198
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
199 <div class="source">
200 $('#custom').stepy({<br/>
201 &nbsp;&nbsp;backLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Backward',<br/>
202 &nbsp;&nbsp;block:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
203 &nbsp;&nbsp;errorImage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
204 &nbsp;&nbsp;nextLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Forward',<br/>
205 &nbsp;&nbsp;titleClick:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
206 &nbsp;&nbsp;validate:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true<br/>
207 });
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
208 </div><br/>
209
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
210 <span class="comment">
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
211 - When the attribute 'validate' is true, you must include the jquery.validate.js.
212 </span><br/>
213
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
214 <div id="step-demo" class="session">With just step without form:</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
215
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
216 <div id="step">
217 <fieldset title="Image 1">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
218 <legend>description one</legend><br/>
219 <center><img src="img/image-1.png" alt="" /></center>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
220 </fieldset>
221
222 <fieldset title="Image 2">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
223 <legend>description two</legend><br/>
224 <center><img src="img/image-2.png" alt="" /></center>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
225 </fieldset>
226
227 <fieldset title="Image 3">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
228 <legend>description three</legend><br/>
229 <center><img src="img/image-3.png" alt="" /></center>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
230 </fieldset>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
231 </div>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
232
233 <div class="source">
234 $('div#step').stepy({<br/>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
235 &nbsp;&nbsp;finishButton: false<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
236 });
237 </div>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
238
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
239 <div id="callback-demo" class="session">With transitions callback:</div>
240
241 <form id="callback">
242 <fieldset title="Step 1">
243 <legend>description one</legend>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
244 <label>Name:</label>
245 <input type="text" size="40" />
246
247 <label>E-mail:</label>
248 <input type="text" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
249 </fieldset>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
250
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
251 <fieldset title="Step 2">
252 <legend>description two</legend>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
253 <label>User:</label>
254 <input type="text"size="40" />
255
256 <label>Password:</label>
257 <input type="password" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
258 </fieldset>
259
260 <fieldset title="Step 3">
261 <legend>description three</legend>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
262
263 <label>Nick Name:</label>
264 <input type="text" size="40" />
265
266 <label>Age:</label>
267 <input type="text" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
268 </fieldset>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
269
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
270 <fieldset title="Step 4">
271 <legend>description four</legend>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
272 <label>Bio:</label>
273 <input type="text"size="40" />
274
275 <label>Detail:</label>
276 <input type="password" size="40" />
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
277 </fieldset>
c1365f5 @wbotelhos jQuery Stepy 1.0.0 Released!
authored Nov 2, 2011
278
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
279 <input type="submit" class="finish" value="Finish!" />
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
280 </form>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
281
282 <div class="source">
283 $('#callback').stepy({<br/>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
284 &nbsp;&nbsp;back: function(index) {<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
285 &nbsp;&nbsp;&nbsp;&nbsp;alert('Going to step ' + index + '...');<br/>
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
286 &nbsp;&nbsp;}, next: function(index) {<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
287 &nbsp;&nbsp;&nbsp;&nbsp;if (!isValid()) {<br/>
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
288 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Invalid random value!');<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
289 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;<br/>
290 &nbsp;&nbsp;&nbsp;&nbsp;}<br/><br/>
291
292 &nbsp;&nbsp;&nbsp;&nbsp;alert('Going to step ' + index + '...');<br/>
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
293 &nbsp;&nbsp;}, select: function(index) {<br/>
294 &nbsp;&nbsp;&nbsp;&nbsp;alert('Current step ' + index + '.');<br/>
295 &nbsp;&nbsp;}, finish: function(index) {<br/>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
296 &nbsp;&nbsp;&nbsp;&nbsp;alert('Finishing on step ' + index + '...');<br/>
297 &nbsp;&nbsp;},<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
298 &nbsp;&nbsp;titleClick: true<br/>
299 });
300 </div><br/>
301
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
302 <span class="comment">
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
303 - You can do validations during the callback;<br/>
304 - Return "false" to prevent the transition;<br/>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
305 - Return "true" or nothing to continue the transition;<br/>
306 - If the Stepy is a form and the finish element is not a submit type, then .submit() will be invoked.
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
307 </span><br/>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
308
309 <div id="target-demo" class="session">With target for the titles and custom legend and description:</div>
310
311 <form id="target">
312 <fieldset title="1">
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
313 <legend>--</legend>
314 <center><img src="img/image-3.png" alt="" /></center>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
315 </fieldset>
316
317 <fieldset title="2">
318 <legend>--</legend>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
319 <center><img src="img/image-1.png" alt="" /></center>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
320 </fieldset>
321
322 <fieldset title="3">
323 <legend>--</legend>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
324 <center><img src="img/image-2.png" alt="" /></center>
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
325 </fieldset>
326
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
327 <input type="submit" class="finish" value="Finish!" />
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
328 </form>
329
330 <div id="title-target"></div>
331
332 <div class="source">
333 &lt;div id="title-target"&gt;&lt;/div&gt;<br/><br/>
334
335 $('#target').stepy({<br/>
336 &nbsp;&nbsp;description:&nbsp;&nbsp;false,<br/>
337 &nbsp;&nbsp;legend:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false,<br/>
338 &nbsp;&nbsp;titleClick:&nbsp;&nbsp;&nbsp;true,<br/>
339 &nbsp;&nbsp;titleTarget:&nbsp;&nbsp;'#title-target'<br/>
340 });<br/>
341 </div><br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
342
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
343 <span class="comment">
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
344 - You can choose any specific target;<br/>
345 - Even if the fieldset has legend, it will not appear if legend attribute is false;<br/>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
346 - The description depends of the legend element. Even with legend attribute setted to false;<br/>
347 - The finish button can be any element you want, since it has the class name 'finish'.
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
348 </span><br/>
349
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
350 <div class="session">HTML structure:</div>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
351
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
352 <div class="source">
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
353 &lt;form id="form"&gt;<br/>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
354 &nbsp;&nbsp;&lt;fieldset title="Title"&gt;<br/>
355 &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;description&lt;/legend&gt;<br/>
356 &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment-html">&lt;!-- input fields --&gt;</span><br/>
357 &nbsp;&nbsp;&lt;/fieldset&gt;<br/><br/>
358
359 &nbsp;&nbsp;&lt;fieldset title="Title"&gt;<br/>
360 &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;description&lt;/legend&gt;<br/>
361 &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment-html">&lt;!-- input fields --&gt;</span><br/>
362 &nbsp;&nbsp;&lt;/fieldset&gt;<br/><br/>
363
364 &nbsp;&nbsp;&lt;input type="submit" class="finish"/&gt;<br/>
365 &lt;/form&gt;
366 </div>
367
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
368 <span class="comment">
369 - The fieldset's title is the main title of the step and the legend is the description of it.
370 </span>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
371
372 <div class="session">Default options:</div>
373
374 <div class="source">
3fc8b0f @wbotelhos Using undefined to default values.
authored Oct 30, 2011
375 back:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
376 <div class="comment">Callback before the backward action.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
377
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
378 backLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&lt; Back'<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
379 <div class="comment">Change the back button label.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
380
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
381 block:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
382 <div class="comment">* Block the next step if the current is invalid.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
383
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
384 description:&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
385 <div class="comment">Choose if the descriptions of the titles will be showed.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
386
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
387 errorImage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
388 <div class="comment">* If an error occurs, a image is showed in the title of the corresponding step.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
389
3fc8b0f @wbotelhos Using undefined to default values.
authored Oct 31, 2011
390 finish:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
391 <div class="comment">Callback before the finish action.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
392
393 finishButton:&nbsp;&nbsp;&nbsp;true<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
394 <div class="comment">Include the element with class name '.finish' into the last step.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
395
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
396 ignore:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;''<br/>
397 <div class="comment">Choose the fields to be ignored on validation.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
398
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
399 legend:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
400 <div class="comment">Choose if the legends of the steps will be showed.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
401
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
402 nextLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Next &gt;'
403 <div class="comment">Change the next button label.</div>
404
3fc8b0f @wbotelhos Using undefined to default values.
authored Oct 31, 2011
405 next:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
406 <div class="comment">Callback before the forward action.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
407
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
408 titleClick:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
409 <div class="comment">Active the back and next action in the titles.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
410
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
411 titleTarget:&nbsp;&nbsp;&nbsp;&nbsp;''<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
412 <div class="comment">Choose the place where titles will be placed.</div>
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
413
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
414 select:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
415 <div class="comment">Callback executed when the step is shown.</div>
416
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
417 validate:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
418 <div class="comment">* Active the jQuery Validation for each step.</div>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
419 </div>
420
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
421 <div class="description-code">* Depends of <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jquery.validation.js</a>.</div>
cbdd765 @wbotelhos Removed space.
authored Jun 17, 2011
422
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
423 <div class="session">Public functions:</div>
424
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
425 <div class="source">$('#stepy').stepy('step', 2);</div>
bcc0a6e @wbotelhos Doc updated.
authored Nov 2, 2011
426 <div class="description-code">Change the form to step 2.</div>
e9ad1c2 @wbotelhos Updated the site.
authored May 25, 2011
427 </div>
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 26, 2010
428
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
429 <div id="footer">
430 <div id="copy">&copy; 2011 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
431 </div>
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
432
433 <script type="text/javascript">
434 $(function() {
435
436 $('#default').stepy();
437
438 $('#custom').stepy({
439 backLabel: 'Backward',
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 26, 2010
440 block: true,
441 errorImage: true,
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
442 nextLabel: 'Forward',
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 26, 2010
443 titleClick: true,
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
444 validate: true
445 });
446
447 $('div#step').stepy({
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
448 finishButton: false
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
449 });
450
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
451 // Optionaly
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
452 $('#custom').validate({
453 errorPlacement: function(error, element) {
75a35bf @wbotelhos jQuery Stepy 0.2.0
authored Nov 26, 2010
454 $('#custom div.stepy-error').append(error);
e1e11bc @wbotelhos minor
authored Oct 30, 2011
455 }, rules: {
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
456 'user': { maxlength: 1 },
457 'email': 'email',
458 'checked': 'required',
459 'newsletter': 'required',
460 'password': 'required',
461 'bio': 'required',
462 'day': 'required'
e1e11bc @wbotelhos minor
authored Oct 30, 2011
463 }, messages: {
7ca286e @wbotelhos + Added 'ignore' option to choose the fields to be ignored on validat…
authored Dec 4, 2011
464 'user': { maxlength: 'User field should be less than 1!' },
465 'email': { email: 'Invalid e-mail!' },
466 'checked': { required: 'Checked field is required!' },
467 'newsletter': { required: 'Newsletter field is required!' },
468 'password': { required: 'Password field is requerid!' },
469 'bio': { required: 'Bio field is required!' },
470 'day': { required: 'Day field is requerid!' },
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
471 }
472 });
473
ee8c08a @wbotelhos Added example with onBack and onNext callback.
authored Jan 30, 2011
474 $('#callback').stepy({
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
475 back: function(index) {
ee8c08a @wbotelhos Added example with onBack and onNext callback.
authored Jan 30, 2011
476 alert('Going to step ' + index + '...');
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
477 }, next: function(index) {
44adf82 @wbotelhos Fixed the several invocation of select step on each validation.
authored Nov 2, 2011
478 if ((Math.random() * 10) < 5) {
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
479 alert('Invalid random value!');
ee8c08a @wbotelhos Added example with onBack and onNext callback.
authored Jan 30, 2011
480 return false;
481 }
482
483 alert('Going to step ' + index + '...');
c8bec1e @wbotelhos Added select callback to doc.
authored Nov 1, 2011
484 }, select: function(index) {
485 alert('Current step ' + index + '.');
14bd84d @wbotelhos Updated the documentation with finish callback and link as finish but…
authored Jun 12, 2011
486 }, finish: function(index) {
487 alert('Finishing on step ' + index + '...');
ee42d4d @wbotelhos Documentation updated to next major release.
authored Oct 30, 2011
488 }, titleClick: true
ee8c08a @wbotelhos Added example with onBack and onNext callback.
authored Jan 30, 2011
489 });
490
c42bbbc @wbotelhos Added the documentations of the 'target', 'legend' and 'description' …
authored Jun 10, 2011
491 $('#target').stepy({
492 description: false,
493 legend: false,
494 titleClick: true,
495 titleTarget: '#title-target'
496 });
497
83c467f @wbotelhos jQuery Stepy 0.1
authored Jul 29, 2010
498 });
499 </script>
500 </body>
501 </html>
Something went wrong with that request. Please try again.