jQuery QuickWizard Basic Demo

Basic demo with sample markup

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="http://rawgithub.com/conzett/jquery.quickWizard/0.1.0/jquery.quickWizard.js"></script>
<h1>Basic Demo</h1>

<p> The jQuery QuickWizard takes the subsections of a form or other container and turns them into separate screens that can be paged through in a wizard-like fashion. Following normal conventions for marking up fields, the form can be transformed with very little effort</p>

<h2>Example</h2>

<code>
    <pre>
$(document).ready(function() {
    $('form').quickWizard();
});
    </pre>
</code>

<h2>Result</h2>

<form>
            <fieldset>
                <legend>Personal Info</legend>
                
                <label for="firstname">First Name</label>
                <input type="text" id="firstname" name="firstname"/>
                
                <label for="lastname">Last Name</label>
                <input type="text" id="lastname" name="lastname"/>
                
                <label for="title">Title</label>
                <input type="text" id="title" name="title"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Address</legend>
                
                <label for="street">Street Address</label>
                <input type="text" id="street" name="street"/>
                
                <label for="city">City</label>
                <input type="text" id="city" name="city" class="required"/>
                
                <label for="state">State</label>
                <input type="text" id="state" name="state"/>
                
                <label for="postalcode">Postal Code</label>
                <input type="text" id="postalcode" name="postalcode"/>
                
                <label for="country">Country</label>
                <input type="text"...

CSS

h1, code, p, form, h2 {
    margin-bottom : 18px;
}

h1, h2 {
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
}

code {
    display : block;
}

p code {
    display : inline;
}

p {
    width : 480px;
}

input, button {
    margin : 0 0 5px 0;
}

body {
    padding : 10px;
}

fieldset {
    padding : 10px;
    margin : 0 0 10px 0;
    border : 1px solid black;
    width: 480px;
}

label, input {
    float : left;
}

label {
    clear : left;
    width : 100px;
}

.checkbox-label {
    padding-left : 20px;
}

.checkbox {
    position : relative;
    left : -120px;
}

label.error {
    clear : none;
    width : auto;
    margin-left : 10px;
    color : red;
}

JavaScript

$(document).ready(function() {
                $('form').quickWizard();
});