代码之家 › 专栏 › 技术社区 › Zabba fl00r

Rails CSS斑马条纹行,但以三组为单位

cycle css ruby-on-rails

Zabba fl00r · 技术社区 · 14 年前

我所知道的: 铁轨有 cycle() 方法,使表中的奇数行/偶数行具有不同的CSS类。我们可以将多个类传递给 循环() 方法,效果很好。

我想要三个一组的行;所以,我用了这个:

...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 i定义为:

.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中有推荐的方法吗?

更新

在与@ryan bigg的答案类似的行中,是否可以按顺序生成字符串,以便cycle()方法可以发送表单中的字符串? prefix_1 prefix_2 prefix_3 以某种方式使用 *3 语法还是其他方式?
使用这种“每三排”条纹的灵感来自 article on Edward Tufte's site
看来CSS3能做到这一点( link ,但目前还没有得到广泛支持:(
与问题无关,但我只是在谷歌上搜索这个问题,以及列出的问题 questionhub.com !我从来没有在questionhub.com上问过这个问题!
现在它在 http://loopingrecursion.com 太!发生什么事。

3 回复 | 直到 14 年前

Ryan Bigg Andrés Bonilla 14 年前

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

nathanvda 14 年前

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

does not work in IE

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

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

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

Zabba fl00r 14 年前

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

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

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

cycle()

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前