another jQuery plugin

javascript jQuery

11 Jan 2010

A nice and small plugin to create a semanticly step list.

Javascript

``` (function($) { $.fn.extend({ steps : function() { $(this).find('li').each( function ( i ){ $(this).prepend('<span class="step">'+(i+1)+'</span>'); }) } }); })(jQuery);

$('ol.steps').steps();

<h3>CSS</h3>

ol.steps li {
float: left;
padding: 5px;
}
ol.steps li span.step {
border: 1px solid red;
-webkit-border-radius: 20px;
-moz-border-radius: 10px;
line-height:18px;
width: 20px;
height:20px;
margin-right: 5px;
display:inline-block;
text-align:center;
color:#fff;
font-weight:bold;
background-color:#f00;
}

<img src="https://media.tumblr.com/tumblr_kw3qkxGZhh1qz6slb.png" alt="example of steps in action">

← Home