Rails CSS lignes zèbre striping, mais dans des ensembles de trois

Question

Ce que je sais: Rails a la méthode qui permet cycle()/même lignes impaires dans une table pour avoir des classes CSS. Nous pouvons passer plusieurs classes à la méthode cycle() et cela fonctionne très bien. Je voulais des lignes groupées en trois; donc, je ceci:

...some html-table code... 
<tr class="<%= cycle("table_row_1","table_row_2","table_row_3","table_row_4","table_row_5","table_row_6") %>"> 
...some more html-table code... 

Le CSS I correspondant est défini:

.table_row_1 { background-color: red;} 
.table_row_2 { background-color: red;} 
.table_row_3 { background-color: red;} 
.table_row_4 { background-color: blue;} 
.table_row_5 { background-color: blue;} 
.table_row_6 { background-color: blue;} 

Il fonctionne, mais il ne se sent pas "propre".

Existe-t-il une méthode recommandée pour faire cela dans Rails?

MISES À JOUR

1. Sur les lignes similaires à @Ryan la réponse de Bigg, est-il possible de générer des chaînes dans l'ordre afin que la méthode du cycle() peuvent être des chaînes envoyé de la forme prefix_1 prefix_2 prefix_3 en utilisant en quelque sorte le *3 syntaxe ou d'une autre manière?
2. L'inspiration pour utiliser cette « chaque troisième rangée » striping est venu d'une article on Edward Tufte's site
3. Il semble CSS3 peut le faire (link), mais ce n'est pas largement pris en charge à ce moment :(
4. Non lié à la question, mais Je viens cherché ce problème, j'ai sur Google, et les questions inscrites à la liste questionhub.com! Je ne ai jamais demandé cela sur questionhub.com!
5. maintenant son sur http://loopingrecursion.com aussi! Qu'est-ce qui se passe.

Answer 1

Comment cela?

<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>"> 

Answer 2

En fait, cela ressemble à quelque chose que je voudrais résoudre en utilisant CSS pur:

table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3) { background:red;} 
table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n) { background:blue;} 

Bien que ce soit à court et dandy, ce does not work in IE malheureusement (il fonctionnera dans le nouveau IE9). Pour que cela fonctionne, vous pouvez utiliser jQuery, qui offre les mêmes sélecteurs et est totalement compatible avec tous les navigateurs.

Dans votre css vous ajoutez deux classes:

table_row_third_even { background: red;} 
table_row_third_odd { background: blue;} 

puis vous écrivez javascript (à l'intérieur application.js par exemple), comme celui-ci

$(function() { 
    $('table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3)').addClass('table_row_third_even'); 
    $('table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)').addClass('table_row_third_odd'); 
}); 

et votre tableau devrait avoir la classe highlight (vous devriez changer cela pour un meilleur nom de convenance, ceci est juste un exemple); mais rien de spécifique pour vos tags tr, car ils seront ajoutés par le code javascript.Mais pour que cela fonctionne, vous devez introduire jQuery dans votre projet. Pour cela, vous devez utiliser jQuery dans votre projet. La bonne chose: il garderait votre code rubis clair de l'encombrement nécessaire pour le faire.

Espérons que cela aide!

Answer 3

J'ai trouvé un moyen de faire cela, qui est en quelque sorte «propre» et me convient pour l'instant. Détails:

Dans un assistant du contrôleur (aucune vérification d'erreur, encore!):

def cycle_every_third(options = []) 
    cycle(options[0],options[0],options[0],options[1],options[1],options[1]) 
end 

HTML:

... 
<tr class="<%= cycle_every_third(["table_row_1","table_row_2"]) %>"> 
... 

CSS:

.table_row_1 { background-color: red;} 
.table_row_2 { background-color: blue;} 

Est-ce une bonne façon de va à ce sujet je me demande? N'importe quels pièges dans Rails I peuvent ne pas être au courant, d'appeler cycle() dans une méthode d'aide au lieu de l'appeler dans le fichier rhtml/erb?