Rails CSS строки с зебра-полосками, но в наборах по три - PullRequest
Новая
       1

Rails CSS строки с зебра-полосками, но в наборах по три

1 голос
/ 02 октября 2010

Что я знаю: В Rails есть метод cycle(), который позволяет нечетным / четным строкам в таблице иметь разные классы CSS.Мы можем передать несколько классов методу cycle(), и это прекрасно работает.

Я хотел строки, сгруппированные в три;Итак, я использовал это: 

...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...

Соответствующий CSS, который я определил: 

.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;}

Работает, но не выглядит "чистым".

Есть ли рекомендуемый способ сделать это в Rails?

ОБНОВЛЕНИЯ

  1. Можно ли сгенерировать строки в последовательности, аналогичной ответу @Ryan Bigg, так, чтобы метод cycle () моготправлять строки вида prefix_1 prefix_2 prefix_3 каким-либо образом с использованием синтаксиса *3 или каким-либо другим способом?
  2. Вдохновение использовать этот чередование "каждый третий ряд" пришло из статьи на сайте Эдварда Туфте
  3. Кажется, CSS3 может сделать это ( link ), но в настоящее время это не поддерживается широко: (
  4. Не связано с вопросом, но я только что искалэта проблема у меня в Google, и вопросы, перечисленные на questionhub.com ! Я никогда не задавал этого на questionhub.com!
  5. Теперь он тоже на http://loopingrecursion.com! Что происходитвкл.

Ответы [ 3 ]

2 голосов
/ 02 октября 2010

На самом деле это звучит как что-то, что я бы решил, используя чистый CSS: 

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;}

Хотя это коротко и модно, это не работает в IE , к сожалению (оно будет работать вновый IE9).

Чтобы это работало, вы можете использовать jQuery, который предлагает те же селекторы и полностью совместим с браузерами.

В вашем CSS вы добавляете два класса: 

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

и затем вы пишете некоторый javascript (например, внутри application.js), например 

$(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');
});

, и ваша таблица должна иметь класс highlight (вы должны изменить это налучше подходит название, это всего лишь пример);но ничего конкретного для ваших тегов tr, так как они будут добавлены кодом javascript. 

<table class='highlight'>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
</table>

Но для этого вам нужно будет внедрить jQuery в свой проект.Хорошо, что ваш код ruby ​​будет очищен от беспорядка, необходимого для этого.

Надеюсь, это поможет!

2 голосов
/ 02 октября 2010

Как насчет этого? 

<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>">
1 голос
/ 02 октября 2010

Я нашел способ сделать это, что-то вроде "чисто" и подходит мне сейчас. Подробности:

В помощнике контроллера (пока нет проверки ошибок!): 

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;}

Интересно, это хороший способ? Какие-нибудь подводные камни в Rails, о которых я могу не знать, о вызове cycle() внутри вспомогательного метода, а не о вызове его в файле rhtml / erb?

...