"AJAX / DIV Wizard "
Bootstrap 3.0.0 Snippet by rdroberto

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="list-group wizard-menu">
<a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
<h4 class="list-group-item-heading">1. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">2. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-3-menu" data-for=".step-3">
<h4 class="list-group-item-heading">3. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
<a href="#" class="list-group-item step-4-menu" data-for=".step-4">
<h4 class="list-group-item-heading">4. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-5-menu" data-for=".step-5">
<h4 class="list-group-item-heading">5. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-6-menu" data-for=".step-6">
<h4 class="list-group-item-heading">6. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
<a href="#" class="list-group-item step-7-menu" data-for=".step-7">
<h4 class="list-group-item-heading">7. Load from DIV</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.container {
margin-top: 1%;
}
/*Wizard*/
.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
background-color: #7aba7b;
border-color: #7aba7b;
color: #ffffff;
}
.list-group-item.success > h4 {
color: #ffffff;
}
.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
background-color: #d59392;
border-color: #d59392;
color: #ffffff;
}
.list-group-item.error > h4 {
color: #ffffff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* Created by: Alexander Mahrt
* Date: 20.11.13
* Time: 03:00
*/
$(document).ready(function() {
loadDataOnReady();
loadDataOnClick();
changeSteps();
nextStep();
finishWizard(function() {
//ON FINISH EVENT
});
});
function finishWizard(onFinish) {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-fin', function(event) {
var finButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO
Form wizard (using tabs)
Bootstrap Material Wizard
Form Wizard and validation

Questions / Comments: