jQuery QuickWizard with UI Effects Demo

Demo showing how to use jQuery UI Effects Core for transitions.

by conzett

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>Transition Effects Using jQuery UI/Effects</h1>

<p>By including the <a href="http://docs.jquery.com/UI/Effects">jQuery UI/Effects Core</a> you can specify fancy effects for how the wizard transitions when navigate between the fieldsets. In the options provide an array of arguments for both the <code>prevArgs</code> and <code>nextArgs</code> options. These are the same arguments you would pass to <code>show()</code> and <code>hide()</code> in jQuery <a href="http://docs.jquery.com/UI/Effects/Slide">using the UI effects normally</a>.</p>
    
    <h2>Example</h2>

<code>
    <pre>
$(document).ready(function() {
    $('form').quickWizard({
        nextArgs : '[ "slide", { direction : "left" }, 500 ]',
        prevArgs : '[ "slide", { direction : "right" }, 500 ]'
    });
});
    </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"...

CSS

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

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


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({
        nextArgs : [ "slide", { direction : "left" }, 500 ],
        prevArgs : [ "slide", { direction : "right" }, 500 ]
    });
});