sexta-feira, 6 de dezembro de 2013

Plugin para 'zebrar' tabelas ou listas com jQuery

 (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: