(function( $ ){
$.fn.zebrar = function(options) {
var defaults = {
'par' : 'lightgrey',
'impar' : 'white'
};
var settings = $.extend( {}, defaults, options );
return this.each(function(index,elemento) {
if((index % 2)==0)
{
$(this).css({ background: settings.par });
}else{
$(this).css({ background: settings.impar });
}
});
};
})( jQuery );
Utiliza assim:
<script src="js/zebrar.js"></script>
<script>
$(function(){
$('ul li').zebrar();
)
</script>
<style>
ul{
list-style-type:none;
padding:0;
margin:0;
}
ul li{
display:block;
}
</style>
<ul>
<li><a href="#">Nunc tincidunt</a></li>
<li><a href="#">Proin dolor</a></li>
<li><a href="#">Aenean lacinia</a></li>
</ul>
Também dá pra passar os parâmetros para as cores das linhas, assim:
$('ul li').zebrar({par:'blue',impar:'red'});
Nota: deixar de ser preguiçoso e usar o github pra códigos grandes.
Nenhum comentário:
Postar um comentário