jQuery QuickWizard UI Effects Showcase

Demo showing various configurations of UI Effects

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>UI Effects Showcase</h1>

<p>This demo showcases several example configurations for using the jQuery UI Effects Core animations. Some work better than others; the "explode" effect, for example, does not play well with input elements it seems, so should be avoided.</p>
    
<h2>Example 1</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form2').quickWizard({
        nextArgs : ["slide", { direction: "down" }, 500],
        PrevArgs : ["slide", { direction: "up" }, 500],
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form1">
            <fieldset>
                <legend>Personal Info</legend>
                
                <label for="firstname1">First Name</label>
                <input type="text" id="firstname1" name="firstname1"/>
                
                <label for="lastname1">Last Name</label>
                <input type="text" id="lastname1" name="lastname1"/>
                
                <label for="title1">Title</label>
                <input type="text1" id="title1" name="title1"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Address</legend>
                
                <label for="street1">Street Address</label>
                <input type="text" id="street1" name="street1"/>
                
                <label for="city1">City</label>
                <input type="text" id="city1" name="city1" class="required"/>
                
                <label for="state1">State</label>
                <input type="text" id="state1" name="state1"/>
                
                <label for="postalcode1">Postal Code</label>
                <input type="text"...

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;
    background : white;
}

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() {
    $('#form1').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["slide", { direction: "up" }, 500],
        prevArgs : ["slide", { direction: "down" }, 500],
        submit : "#submit1"
    });
    
    $('#form2').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["clip", { direction: "horizontal" }, 500],
        prevArgs : ["clip", { direction: "vertical" }, 500],        
        submit : "#submit2"
    });
    
    $('#form3').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["puff", 500],
        prevArgs : ["puff", 500],        
        submit : "#submit3"
    });
    
    $('#form4').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["bounce", { times:1 }, 500],
        prevArgs : ["bounce", { times:1 }, 500],        
        submit : "#submit4"
    });
    
    $('#form5').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["fade", {}, 1000],
        prevArgs : ["fade", {}, 1000],        
        submit : "#submit5"
    });
    
    $('#form6').quickWizard({
        prevButton : '<button type="button">Previous</button>',
        nextButton : '<button type="button">Next</button>',
        nextArgs : ["drop", { direction: "down" }, 500],
        prevArgs : ["drop", { direction: "down" }, 500, function(){
            $('#form6').find(".form-wizard-active").effect("highlight", {}, 3000);
                }],        
        submit : "#submit6"
    });
});