Wizard wizard.js

A wizard divides a complex goal into multiple steps by separating sub-tasks or content into panes. You can add or remove panes. Completed steps remain clickable.

Usage

Via JavaScript

$('#myWizard').wizard();

Via data-attributes

The wizard will automatically instantiate any wizards with data-initialize="wizard". If you add control markup after page load with data-initialize="wizard", this control initializes on mouseover.

Markup

Wrap class="wizard" around a list of steps, navigation, and content within a class="fuelux" container.

<div class="wizard" id="myWizard" data-initialize="wizard">
<div class="steps-container">
	<ul class="steps">
		<li class="active" data-step="1" data-name="campaign">
			<span class="badge">1</span>Campaign
			<span class="chevron"></span>
		</li>
		<li data-step="2">
			<span class="badge">2</span>Recipients
			<span class="chevron"></span>
		</li>
		<li data-step="3" data-name="template">
			<span class="badge">3</span>Template
			<span class="chevron"></span>
		</li>
	</ul>
</div>
<div class="actions">
	<button class="btn btn-default btn-prev" type="button">
		<span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
	<button class="btn btn-primary btn-next" data-last="Complete" type="button">Next
		<span class="glyphicon glyphicon-arrow-right"></span>
	</button>
</div>
<div class="step-content">
	<div class="step-pane active sample-pane alert" data-step="1">
		<h4>Setup Campaign</h4>
		<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
	</div>
	<div class="step-pane sample-pane bg-info alert" data-step="2">
		<h4>Choose Recipients</h4>
		<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
	</div>
	<div class="step-pane sample-pane bg-danger alert" data-step="3">
		<h4>Design Template</h4>
		<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
	</div>
</div>


</div>

Data Attribute Options

For data attributes, append the option name to data-, as in data-restrict="".

Options

You can pass options via Javascript upon initialization.

Methods

.wizard('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup

.wizard('previous')

Moves to the previous step

.wizard('next')

Moves to the next step

.wizard('selectedItem')

Returns the current step index.

$('#myWizard').wizard('selectedItem');

.wizard('selectedItem', 3)

Moves to passed in step. This can be either an integer or the `data-name` of a step.

$('#myWizard').wizard('selectedItem', {
	step: 3
});

$('#myWizard').wizard('selectedItem', {
	step: "named item"
});

.wizard('addSteps')

Add a pane or an array of panes to a wizard. Wrap this markup with <div class="step-pane"></div>

$('#myWizard').wizard('addSteps', index, [
	{
		badge: 'badge-customicon',
		label: 'A Step Label',
		pane: '
Content
'
	}
]);

Parameter	Description
index	Required. Identifies the position used to start inserting pane(s). First pane exists at position 1. If you use -1, the item will append to end of the list of panes.
[item1, ..., itemX] item1, ..., itemX	Identifies an array or list of content pane objects to add at the index. Each pane can contain three strings: a badge class to be appended to the class attribute of the step in order to override the default number a label for the name of the step the pane of HTML content

.wizard('removeSteps')

Remove a pane or multiple panes from a wizard

$('#myWizard').wizard('removeSteps', index, howMany);

Parameter	Description
index	Required. Identifies the position where to begin removing pane(s). First pane exists at position 1.
howMany	Optional. Specifies the number of panes to removed. Defaults to 1.

Events

All wizard events are fired on the .wizard classed element.

$('#myWizard').on('actionclicked.fu.wizard', function (evt, data) {
	// do something
});

Examples

Wrap the input and wizard button within .fuelux .wizard