UI Effects Showcase

gistfile1.html

<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" id="postalcode1" name="postalcode1"/>
                
                <label for="country1">Country</label>
                <input type="text" id="country1" name="country1"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color1">Favorite Color</label>
                <input type="text" id="color1" name="color1"/>
                
                <label for="pants1">Pants Size</label>
                <input type="text" id="pants1" name="pants1"/>
                
                <label class="checkbox-label" for="kittens1">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens1" name="kittens1"/>
                
                <label class="checkbox-label" for="peanutbutter1">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter1" name="peanutbutter1"/>
                
            </fieldset>
            
            <button type="submit" id="submit1">Submit</button>
            
        </form>

<!--example 2-->

<h2>Example 2</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form1').quickWizard({
        nextArgs : ["clip", { direction: "horizontal" }, 500],
        PrevArgs : ["clip", { direction: "vertical" }, 500],
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form2">
            <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" id="country" name="country"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>
                
                <label class="checkbox-label" for="kittens">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens" name="kittens"/>
                
                <label class="checkbox-label" for="peanutbutter">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter" name="peanutbutter"/>
                
            </fieldset>
            
            <button type="submit" id="submit2">Submit</button>
            
        </form>

<!--example 3-->

<h2>Example 3</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form1').quickWizard({
        nextArgs : ["puff", 500],
        PrevArgs : ["puff", 500],
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form3">
            <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" id="country" name="country"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>
                
                <label class="checkbox-label" for="kittens">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens" name="kittens"/>
                
                <label class="checkbox-label" for="peanutbutter">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter" name="peanutbutter"/>
                
            </fieldset>
            
            <button type="submit" id="submit3">Submit</button>
            
        </form>

<!--example 4-->

<h2>Example 4</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form1').quickWizard({
        nextArgs : ["bounce", 500],
        PrevArgs : ["bounce", 500],
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form4">
            <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" id="country" name="country"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>
                
                <label class="checkbox-label" for="kittens">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens" name="kittens"/>
                
                <label class="checkbox-label" for="peanutbutter">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter" name="peanutbutter"/>
                
            </fieldset>
            
            <button type="submit" id="submit4">Submit</button>
            
        </form>


<!--example 5-->

<h2>Example 5</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form1').quickWizard({
        nextArgs : ["fade", 1000],
        PrevArgs : ["fade", 1000],
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form5">
            <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" id="country" name="country"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>
                
                <label class="checkbox-label" for="kittens">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens" name="kittens"/>
                
                <label class="checkbox-label" for="peanutbutter">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter" name="peanutbutter"/>
                
            </fieldset>
            
            <button type="submit" id="submit5">Submit</button>
            
        </form>

<!--example 6-->

<h2>Example 6</h2>

<code>
    <pre>
$(document).ready(function() {
    $('#form1').quickWizard({
        nextArgs : ["drop", { direction: "down" }, 500],
        prevArgs : ["drop", { direction: "down" }, 500, function(){
            $('#form6').find(".form-wizard-active").effect("highlight", {}, 3000);
        }]
    });
});
    </pre>
</code>

<h2>Result</h2>

<form id="form6">
            <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" id="country" name="country"/>
                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>
                
                <label class="checkbox-label" for="kittens">Kittens</label>
                <input type="checkbox" class="checkbox" id="kittens" name="kittens"/>
                
                <label class="checkbox-label" for="peanutbutter">Peanut Butter</label>
                <input type="checkbox" class="checkbox" id="peanutbutter" name="peanutbutter"/>
                
            </fieldset>
            
            <button type="submit" id="submit6">Submit</button>
            
        </form>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

gistfile2.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;
}

gistfile3.js

$(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"
    });
});