jQuery steps plugin

by Jens Grochtdreis

HTML

<html>
<head>
    <title>CSS Steps Demo</title>
</head>

<body>
        <div class="steps">
            <ul class="blue 5steps">
                <li class="completed"><a href="#"><em>Step 1</em><span>Description 1</span></a></li>
                <li class="completedLast"><a href="#"><em>Step 2</em><span>Description 2</span></a></li>
                <li class="current"><a href="#"><em>Step 3</em><span>Descripci&oacute;n del paso 1</span></a></li>
                <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
                <li class="end"><a href="#"><em>Step 5</em><span></span></a></li>
            </ul>
        </div>
        <span style="clear:both; display:block;">&nbsp;</span>

    <input type="button" value="Start over |<-" onclick="$('.steps').steps('start');"/>
    <input type="button" value="<< prev" onclick="$('.steps').steps('prev');"/>
    <input type="button" value="next >>" onclick="$('.steps').steps('next');"/>
    <input type="button" value="Finish ->|" onclick="$('.steps').steps('finish');"/>
</body>
</html>

CSS

/**
 * Steps UL/LI styles.
 * ================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 *
 * Useful wizard step indications
 *
 * Sample:
 *     <div class="steps">
 *         <ul class="blue">
 *             <li class="completed"><a href="#"><em>Step 1</em><span>Description of step 1</span></a></li>
 *             <li class="last completed"><a href="#"><em>Step 2</em><span>Description of step 2</span></a></li>
 *             <li class="current"><a href="#"><em>Step 3</em><span>Description of step 3</span></a></li>
 *             <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
 *             <li class=""><a href="#"><em>Step 5</em><span></span></a></li>
 *         </ul>
 *     </div>
 *
 * Classes
 *     N/A              - Uncompleted step. Greyed by default
 *     end              - Last uncompleted step. Greyed and no "arrow". Modern browsers just need "last" class instead of end.
 *     last             - Boundary class. Marks last completed step and last step. Used only by modern browsers (the ones with the ability of interpret multiple classes for one element)
 *     current          - Current step
 *     completed        - Completed step. Lighter color
 *     completedLast    - Last completed step. Older browsers compatibility. Modern browsers just need "last completed" classes
 *     completedLastEnd - Last step when all steps are completed. Older browsers compatibility. Modern browsers just need "last completed" classes
 *
 * If you plan to use only actual browsers just need the classes "", "current" and "completedLast OR "last completed"
 * If you need full browsers compatibiliy, you need "", "end", "current", "completed", "completedLast" and "completedLastEnd"
 *
 * Extending steps with jQuery
 *     You can also use the steps jQuey plugin. You can find it at
 *     http://3nibbles.blogspot.com/2011/06/pasos-de-wizard.html
 *     
 * Legal stuff
 *      You are free to use this CSS, but you must...

JavaScript

/**
 * jquery.steps-0.1,js - Steps plugin for jQuery
 * ================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 * 
 * Instantiation: $('.stepsDiv').steps()
 * 
 * Functions:
 *     $('.stepsDiv').steps('getStep') - Returns current step for stepDiv
 *     $('.stepsDiv').steps('start')   - Resets state to initial step
 *     $('.stepsDiv').steps('finish')  - Sets state to completed
 *     $('.stepsDiv').steps('next')    - Sets state to next state
 *     $('.stepsDiv').steps('prev')    - Sets state to previous state
 *     
 * Classes needed and meaning
 *     N/A              - Uncompleted step. Greyed by default
 *     end              - Last uncompleted step. Greyed and no "arrow"
 *     last             - Boundary class. Marks last completed step and last step
 *     current          - Current step
 *     completed        - Completed step
 *     completedLast    - Last completed step
 *     completedLastEnd - Last step when all steps are completed
 * 
 * Extending steps with representation
 *     You can also use the steps CSS. You can find it at
 *     http://3nibbles.blogspot.com/2011/06/pasos-de-wizard.html
 *     
 * Legal stuff
 *     You are free to use this CSS, but you must give credit or keep header intact.
 *     Please, tell me if you find it useful. An email will be enough.
 *     If you enhance this code or correct a bug, please, tell me.
 * 
 */
(function( $ ){

    $.fn.steps = function( options ) {  
        
        var self = this;
        
        
        //////////////////////////////////////////////////////////////////////////////////
        // DEFAULT VALUES
        var defaults = {};

        //////////////////////////////////////////////////////////////////////////////////
        // PRIVATE FUNCTIONS
        var init = function( options ) {
            
            // If options exist, merge them with default settings
            if ( options ) $.extend( defaults, options );
        
        ...