jQuery steps plugin
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ó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;"> </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 );
...