[jQuery] Zebra stripes (alternate background colours)
Just in case anyone is looking for an easy way to create zebra stripes
(for table rows or whatever), here's a small plugin you could use:
$('.zebra :even').zebra()
or $('.zebra :even').zebra('.zebra :odd') - will take the background
colour of selector specified as a starting colour
or $('.zebra :even').zebra(0.5) - < 1 makes it darker, > 1 makes it
lighter
or $('.zebra :even').zebra('.zebra:odd',0.5)
jQuery.fn.zebra = function(){
var args = function(a,t){for(var i=0;i<a.length;i++){if(typeof
a[i]==t){return a[i];break;}}},
base = args(arguments,'string'),degree = args(arguments,'number')||
0.75;
return this.each(function(){
var getValues = function(rgb){return rgb.substring(rgb.indexOf('(')
+1,rgb.indexOf(')')).split(',');},
setValue = function(value){ return parseInt(value*degree);},
$this = $(this), rgb = getValues($(base||
this).eq(0).css('background-color'));
$this.css('background-color', 'rgb('+setValue(rgb[0])
+','+setValue(rgb[1])+','+setValue(rgb[2])+')');
});
};
Mostly this would be useful if you are just testing a design to see
how it works as it's much better to add alternate classes via server
side, or if you only have a few items