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.
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.
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.
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.
<div class="wizard-step" id="wizardIllustration" data-toggle="wizardStep">
<ul class="steps">
<li data-step="1" data-name="campaign" class="complete">
<span class="badge badge-success">1</span>Campaign<span class="chevron"></span>
</li>
<li data-step="2" class="active">
<span class="badge badge-info">2</span>Recipients<span class="chevron"></span>
</li>
<li data-step="3" data-name="template" class="">
<span class="badge">3</span>Template<span class="chevron"></span>
</li>
</ul>
<div class="actions">
<button type="button" class="btn btn-default btn-prev">
<span class="glyphicon glyphicon-arrow-left"></span>Prev
</button>
<button type="button" class="btn btn-default btn-next" data-last="Complete">
Next<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
<div class="step-content">
<div class="step-pane 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 active" 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>Wrap the input and wizard button within .wizard-step
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.
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.
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.
<div class="wizard-step" id="myWizard">
<ul class="steps">
<li data-step="1" data-name="campaign" class="active">
<span class="badge badge-info">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 class="actions">
<button type="button" class="btn btn-default btn-prev" disabled="disabled">
<span class="glyphicon glyphicon-arrow-left"></span>Prev
</button>
<button type="button" class="btn btn-default btn-next" data-last="Complete">
Next<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
<div class="step-content">
<div class="step-pane sample-pane alert active" 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>
<script type="text/javascript">
$('#myWizard').wizardStep();
$('#btnWizardPrev').on('click',function(){
$('#myWizard').wizardStep('previous');
});
$('#btnWizardNext').on('click',function(){
$('#myWizard').wizardStep('next');
});
$('#btnWizardStep').on('click',function(){
alert($('#myWizard').wizardStep('selectStep').step);
});
$('#btnWizardSetStep').on('click',function(){
$('#myWizard').wizardStep('selectStep', 3);
});
$('#btnWizardAddSteps').on('click',function(){
$('#myWizard').wizardStep('addSteps', 4, [
{
//badge: 'badge-customicon',
label: 'A Step Label',
pane: '<div>Content</div>'
}
]);
});
$('#btnWizardRemoveStep').on('click',function(){
console.log($('#myWizard').wizardStep('removeSteps',3,1));
});
</script><div class="wizard-step" id="wizardForm">
<ul class="steps">
<li class="active" data-step="1" data-name="step1" class="complete">
<span class="badge badge-info">1</span>Step1<span class="chevron"></span>
</li>
<li data-step="2" data-name="step2">
<span class="badge">2</span>Step2<span class="chevron"></span>
</li>
<li data-step="3" data-name="review">
<span class="badge">3</span>Review<span class="chevron"></span>
</li>
</ul>
<div class="step-content">
<div class="step-pane active" data-step="1">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<input class="form-control" id="label" name="label" type="text" placeholder="Server label">
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<p>Full Qualified Domain Name</p>
<div class="input-group">
<input type="text" class="form-control" id="fqdn" name="fqdn" placeholder="FQDN" data-validate="validateFQDN" data-is-valid="0" data-lookup="0" />
<span class="input-group-btn" id="btn-fqdn">
<button class="btn btn-default" type="button" onclick='lookup();'>Lookup</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<p>Server ip.</p>
<input type="text" class="form-control" id="ip" name="ip" placeholder="IP" data-serialize="1" />
</div>
</div>
</form>
</div>
<div class="step-pane" data-step="2">
<form class="form-horizontal">
<p>
Please choose the services you'd like Panopta to
monitor. Any service you select will be given a default
check frequency of 1 minute.
</p>
<select id="first-disabled" name="select1" data-spy="iSelect" data-hide-disabled="true" data-live-search="false">
<optgroup disabled="disabled" label="disabled">
<option>Hidden</option>
</optgroup>
<optgroup label="Fruit">
<option>Apple</option>
<option>Orange</option>
</optgroup>
<optgroup label="Vegetable">
<option>Corn</option>
<option>Carrot</option>
</optgroup>
</select>
</form>
</div>
<div class="step-pane alert" data-step="3">
</div>
</div>
<div class="actions">
<button type="button" class="btn btn-default btn-prev">
<span class="glyphicon glyphicon-arrow-left"></span>Prev
</button>
<button type="button" class="btn btn-success btn-submit">
<span class="glyphicon glyphicon-floppy-saved"></span>Submit
</button>
<button type="button" class="btn btn-default btn-next" data-last="Submit">
Next<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
<script type="text/javascript">
$("#wizardForm").wizardStep({
orient: "vertical",
formMode: true,
formSubmitting: {
steps: [2],
ajaxOptions: {
url: window.location.href,
success: function() {
debugger;
}
},
validations: {
'step1': function($stepPane) {
var $form = $('form', $stepPane);
var name = $("#label", $form).val();
if (name == "") {
alert("Please enter a label");
return false;
}
var $fqdn = $("#fqdn", $form);
if ($fqdn.is(':disabled')) {
return true;
} else {
if ($fqdn.data('lookup') === 0) {
alert("Preform lookup first");
return false;
} else {
if ($fqdn.data('is-valid') === 0) {
alert("Lookup Failed");
return false;
}
}
}
return true;
},
'step2': function() {
var def = $.Deferred();
setTimeout(function() {
def.resolve(true);
}, 2000);
return def;
}
}
},
onChanged: function(step) {
if (step.name == "review") {
var data = this.serializeObject(), $stepPane = this.getStepPane(), html = '<dl class="dl-horizontal">';
$.each(data, function(key, value) {
html += (
'<dt class="form-control-static">' + key + '</dt>' +
'<dd class="form-control-static">' + value + '</dd>'
);
});
html += "</dl>";
this.setStepPane(html);
}
}
});
$('#btnWizardSetSubmitEnable').on('click',function(){
$('#wizardForm').wizardStep('setSubmitStep',2,true);
});
$('#btnWizardSetSubmitDisable').on('click',function(){
$('#wizardForm').wizardStep('setSubmitStep',2,false);
});
function lookup() {
// Normally a ajax call to the server to preform a lookup
$('#fqdn').data('lookup', 1);
$('#fqdn').data('is-valid', 1);
$('#ip').val('127.0.0.1');
}
</script>