Skip to content

Commit 4b9a014

Browse files
author
Rafael J. Staib
committed
Add auto focus option and complete api documentation
1 parent 172ba8d commit 4b9a014

File tree

3 files changed

+267
-23
lines changed

3 files changed

+267
-23
lines changed

‎jquery.steps.js

+265-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
/*!
2-
* jQuery Steps Plugin v0.9.2 - A powerful jQuery wizard plugin that supports accessibility and HTML5
2+
* jQuery Steps Plugin v0.9.4 - A powerful jQuery wizard plugin that supports accessibility and HTML5
33
* https://github.com/rstaib/jquery-steps
44
*
55
* Copyright (c) 2013 Rafael J. Staib
66
* Released under the MIT license
77
*
88
* Follow me on twitter: https://twitter.com/@RafaelStaib
99
*
10-
* Tested with jQuery v1.9.1 but should work with earlier and newer versions as well.
10+
* Tested with jQuery v1.4.4 and newer versions as well.
1111
* Please report issues at: https://github.com/rstaib/jquery-steps/issues
1212
*/
1313

1414
/*
1515
* TODOs:
1616
* - Add tests and styles for loading animation (Spinner)
1717
* - Add tests for add, insert and remove
18+
* - Add tests in general
1819
* - Shrink the comprehensive code
19-
* - Add auto focus option (default = false)
2020
*
2121
* Planed Features:
2222
* - Progress bar
@@ -176,6 +176,7 @@
176176
*
177177
* @property headerTag
178178
* @type String
179+
* @default "h1"
179180
* @for defaults
180181
**/
181182
headerTag: "h1",
@@ -185,69 +186,307 @@
185186
*
186187
* @property bodyTag
187188
* @type String
189+
* @default "div"
188190
* @for defaults
189191
**/
190192
bodyTag: "div",
191193

192194
/**
193-
* The content container tag that will be used to wrap all step contents.
195+
* The content container tag which will be used to wrap all step contents.
194196
*
195197
* @property contentContainerTag
196198
* @type String
199+
* @default "div"
197200
* @for defaults
198201
**/
199202
contentContainerTag: "div",
200203

201204
/**
202-
* The action container tag that will be used to wrap the pagination navigation.
205+
* The action container tag which will be used to wrap the pagination navigation.
203206
*
204207
* @property actionContainerTag
205208
* @type String
209+
* @default "div"
206210
* @for defaults
207211
**/
208212
actionContainerTag: "div",
209213

210214
/**
211-
* The steps container tag that will be used to wrap the steps navigation.
215+
* The steps container tag which will be used to wrap the steps navigation.
212216
*
213217
* @property stepsContainerTag
214218
* @type String
219+
* @default "div"
215220
* @for defaults
216221
**/
217222
stepsContainerTag: "div",
218223

219-
/* Templates */
224+
/*
225+
* Tempplates
226+
*/
227+
228+
/**
229+
* The title template which will be used to create a step button.
230+
*
231+
* @property titleTemplate
232+
* @type String
233+
* @default "<span class=\"number\">#index#.</span> #title#"
234+
* @for defaults
235+
**/
220236
titleTemplate: "<span class=\"number\">#index#.</span> #title#",
237+
238+
/**
239+
* The loading template which will be used to create the loading animation.
240+
*
241+
* @property loadingTemplate
242+
* @type String
243+
* @default "<span class=\"spinner\"></span> #text#"
244+
* @for defaults
245+
**/
221246
loadingTemplate: "<span class=\"spinner\"></span> #text#",
222247

223-
/* Behaviours */
224-
enableAllSteps: false, /* If true, all steps are ebable from the begining (all steps are clickable) */
248+
/*
249+
* Behaviours
250+
*/
251+
252+
/**
253+
* Sets the focus to the first wizard instance in order to enable the key navigation from the begining if true.
254+
*
255+
* @property autoFocus
256+
* @type Boolean
257+
* @default false
258+
* @for defaults
259+
**/
260+
autoFocus: false,
261+
262+
/**
263+
* Enables all steps from the begining if true (all steps are clickable).
264+
*
265+
* @property enableAllSteps
266+
* @type Boolean
267+
* @default false
268+
* @for defaults
269+
**/
270+
enableAllSteps: false,
271+
272+
/**
273+
* Enables keyboard navigation if true (arrow left and arrow right).
274+
*
275+
* @property enableKeyNavigation
276+
* @type Boolean
277+
* @default true
278+
* @for defaults
279+
**/
225280
enableKeyNavigation: true,
281+
282+
/**
283+
* Enables pagination if true.
284+
*
285+
* @property enablePagination
286+
* @type Boolean
287+
* @default true
288+
* @for defaults
289+
**/
226290
enablePagination: true,
227-
suppressPaginationOnFocus: true, /* Suppress pagination if a form field is focused (within the current wizard) */
291+
292+
/**
293+
* Suppresses pagination if a form field is focused.
294+
*
295+
* @property suppressPaginationOnFocus
296+
* @type Boolean
297+
* @default true
298+
* @for defaults
299+
**/
300+
suppressPaginationOnFocus: true,
301+
302+
/**
303+
* Enables cache for async loaded or iframe embedded content.
304+
*
305+
* @property enableContentCache
306+
* @type Boolean
307+
* @default true
308+
* @for defaults
309+
**/
228310
enableContentCache: true,
311+
312+
/**
313+
* Shows the finish button if enabled.
314+
*
315+
* @property enableFinishButton
316+
* @type Boolean
317+
* @default true
318+
* @for defaults
319+
**/
229320
enableFinishButton: true,
230-
preloadContent: false, /* Not yet implemented */
321+
322+
/**
323+
* Not yet implemented.
324+
*
325+
* @property preloadContent
326+
* @type Boolean
327+
* @default false
328+
* @for defaults
329+
**/
330+
preloadContent: false,
331+
332+
/**
333+
* Shows the finish always (on each step; right beside the next button) if true.
334+
* Otherwise the next button will be replaced by the finish on the last step.
335+
*
336+
* @property showFinishButtonAlways
337+
* @type Boolean
338+
* @default false
339+
* @for defaults
340+
**/
231341
showFinishButtonAlways: false,
342+
343+
/**
344+
* Forces forward navigation (move backward is not possible).
345+
*
346+
* @property forceMoveForward
347+
* @type Boolean
348+
* @default false
349+
* @for defaults
350+
**/
232351
forceMoveForward: false,
233-
startIndex: 0, /* zero-based index */
234352

235-
/* Animation Effect Settings */
353+
/**
354+
* The position to start (zero-based).
355+
*
356+
* @property startIndex
357+
* @type Integer
358+
* @default 0
359+
* @for defaults
360+
**/
361+
startIndex: 0,
362+
363+
/*
364+
* Animation Effect Settings
365+
*/
366+
367+
/**
368+
* The animation effect which should be used for step transitions.
369+
*
370+
* @property transitionEffect
371+
* @type transitionEffect
372+
* @default none
373+
* @for defaults
374+
**/
236375
transitionEffect: $.fn.steps.transitionEffect.none,
237-
transitionEffectSpeed: 200, /* In milliseconds */
238376

239-
/* Event Handlers */
240-
onStepChanging: function (event, currentIndex, newIndex) { return true; }, /* If return false, the step changing process will stop; ideal for form validation */
377+
/**
378+
* The animation speed for step transitions (in milliseconds).
379+
*
380+
* @property transitionEffectSpeed
381+
* @type Integer
382+
* @default 200
383+
* @for defaults
384+
**/
385+
transitionEffectSpeed: 200,
386+
387+
/*
388+
* Event Handlers
389+
*/
390+
391+
/**
392+
* Fires before the step changes and can be used to prevent step changing by returning false.
393+
* Very useful for form validation.
394+
*
395+
* @property onStepChanging
396+
* @type Event
397+
* @default function (event, currentIndex, newIndex) { return true; }
398+
* @for defaults
399+
**/
400+
onStepChanging: function (event, currentIndex, newIndex) { return true; },
401+
402+
/**
403+
* Fires after the step has change.
404+
*
405+
* @property onStepChanged
406+
* @type Event
407+
* @default function (event, currentIndex, priorIndex) { }
408+
* @for defaults
409+
**/
241410
onStepChanged: function (event, currentIndex, priorIndex) { },
242-
onFinishing: function (event, currentIndex) { return true; }, /* If return false, the finishing process will stop; ideal for form validation */
411+
412+
/**
413+
* Fires before finishing and can be used to prevent completion by returning false.
414+
* Very useful for form validation.
415+
*
416+
* @property onFinishing
417+
* @type Event
418+
* @default function (event, currentIndex) { return true; }
419+
* @for defaults
420+
**/
421+
onFinishing: function (event, currentIndex) { return true; },
422+
423+
/**
424+
* Fires after the completion.
425+
*
426+
* @property onFinished
427+
* @type Event
428+
* @default function (event, currentIndex) { }
429+
* @for defaults
430+
**/
243431
onFinished: function (event, currentIndex) { },
244432

245-
/* Labels */
433+
/**
434+
* Contains all labels.
435+
*
436+
* @property labels
437+
* @type Object
438+
* @for defaults
439+
**/
246440
labels: {
247-
current: "current step:", /* For Accessability reasons */
441+
/**
442+
* This label is important for accessability reasons.
443+
* Indicates which step is activated.
444+
*
445+
* @property current
446+
* @type String
447+
* @default "current step:"
448+
* @for defaults
449+
**/
450+
current: "current step:",
451+
452+
/**
453+
* Label for the finish button.
454+
*
455+
* @property finish
456+
* @type String
457+
* @default "Finish"
458+
* @for defaults
459+
**/
248460
finish: "Finish",
461+
462+
/**
463+
* Label for the next button.
464+
*
465+
* @property next
466+
* @type String
467+
* @default "Next"
468+
* @for defaults
469+
**/
249470
next: "Next",
471+
472+
/**
473+
* Label for the previous button.
474+
*
475+
* @property previous
476+
* @type String
477+
* @default "Previous"
478+
* @for defaults
479+
**/
250480
previous: "Previous",
481+
482+
/**
483+
* Label for the loading animation.
484+
*
485+
* @property loading
486+
* @type String
487+
* @default "Loading ..."
488+
* @for defaults
489+
**/
251490
loading: "Loading ..."
252491
}
253492
};
@@ -422,8 +661,8 @@
422661
* $("#wizard").steps().insert(0, {
423662
* title: "Title",
424663
* content: "", // optional
425-
* contentMode: "async",
426-
* contentUrl: "/Content/Step/1"
664+
* contentMode: "async", // optional
665+
* contentUrl: "/Content/Step/1" // optional
427666
* });
428667
* @chainable
429668
**/
@@ -511,6 +750,11 @@
511750

512751
transform($this);
513752

753+
if (opts.autoFocus && _uniqueId === 1)
754+
{
755+
$(".steps li.current a", $this).focus();
756+
}
757+
514758
$this.bind("finishing.steps", opts.onFinishing);
515759
$this.bind("finished.steps", opts.onFinished);
516760
$this.bind("stepChanging.steps", opts.onStepChanging);

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "jQuery-steps",
33
"title": "jQuery Wizard Plugin",
4-
"version": "0.9.3",
4+
"version": "0.9.4",
55
"description": "A powerful jQuery wizard plugin that supports accessibility and HTML5",
66
"homepage": "https://github.com/rstaib/jquery-steps",
77
"author": {

‎steps.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"accessibility",
1313
"validation"
1414
],
15-
"version": "0.9.3",
15+
"version": "0.9.4",
1616
"author": {
1717
"name": "Rafael J. Staib",
1818
"email": "rstaib@derklang.com",

0 commit comments

Comments
 (0)