Bootstrap Snippet Steps Wizard Bootstrap using HTML jQuery

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Optional Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <!-- Include SmartWizard CSS -->
    <link href="https://www.jquery-az.com/boots/css/smartWizard/smart_wizard.min.css" rel="stylesheet" type="text/css" />
    
    <!-- Optional SmartWizard theme -->
    <link href="https://www.jquery-az.com/boots/css/smartWizard/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
    <link href="https://www.jquery-az.com/boots/css/smartWizard/smart_wizard_theme_arrows.min.css" rel="stylesheet" type="text/css" />
    <link href="https://www.jquery-az.com/boots/css/smartWizard/smart_wizard_theme_dots.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        
        <form class="form-inline">
            <label>External Buttons:</label>
            <div class="btn-group navbar-btn" role="group">
                <button class="btn btn-success" id="prev-btn" type="button">Back</button>
                <button class="btn btn-success" id="next-btn" type="button">Next</button>
                <button class="btn btn-primary" id="reset-btn" type="button">Reset</button>
            </div>
        </form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
 $(document).ready(function(){
            // Smart Wizard
            $('#smartwizard').smartWizard({ 
                    selected: 0, 
                    theme: 'circles',
                    transitionEffect:'slide',
                    toolbarSettings: {toolbarPosition: 'both',
                                      toolbarExtraButtons: [
                                            {label: 'Finish', css: 'btn-success', onClick: function(){ alert('Finish Clicked'); }},
                                            {label: 'Cancel', css: 'btn-warning', onClick: function(){ $('#smartwizard').smartWizard("reset"); }}
                                        ]
                                    }
                 });
                                         
            
            // External Button Events
            $("#reset-btn").on("click", function() {
                // Reset wizard
                $('#smartwizard').smartWizard("reset");
                return true;
            });
            
            $("#prev-btn").on("click", function() {
                // Navigate previous
                $('#smartwizard').smartWizard("prev");
                return true;
            });
            
            $("#next-btn").on("click", function() {
                // Navigate next
                $('#smartwizard').smartWizard("next");
                return true;
            });
            
                $('#smartwizard').smartWizard("theme", "circles");
            
        });   
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Steps Wizard Bootstrap "
Bootstrap 3.3.0 Snippet by ajitk34

Related: See More

Questions / Comments:

"Steps Wizard Bootstrap " Bootstrap 3.3.0 Snippet by ajitk34

Related: See More

Questions / Comments:

"Steps Wizard Bootstrap "
Bootstrap 3.3.0 Snippet by ajitk34