Rails 4 - 如何编写以交替格式显示实例的视图
Rails 4 -how to write a view that displays instances in alternating format
我正在尝试弄清楚如何以交替格式呈现数据。
下面是两个列表项。第一个只是 "li"。第二个附有 class="timeline-inverted"。 CSS 在页面中央设置时间轴样式,我想在每一侧显示实例(按交替顺序)。
第一个列表项:
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> Aug 2010 - Nov 2012</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase">Bluepixel LLC, London</h3>
<h6 class="uppercase">Junior Designer</h6>
</div>
</div>
</li>
第二个列表项:
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
<div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> March 2013 - Jan 2014</p>
<div class="timeline-photo timeline-bg02-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase">Rocket Media, Berlin</h3>
<h6 class="uppercase">Senior Designer</h6>
</div>
</div>
</li>
在我看来,我目前拥有:
<div class="dividewhite4"></div>
<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light">
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
</ul>
<% end %>
<div class="dividewhite6"></div>
但我想说的是,每个 first/third/fifth 实例都应采用该列表格式,第二个/第四个/第六个实例应采用 "li" 格式,其中包含 class 方法附加到页面的另一边。
有人知道怎么做吗?
周期建议
尝试了下面的循环建议后,它将每个属性放入两个列表项中的每一个。我如何调整它,使每个属性只显示一次,但按时间顺序排列,以便它们以交替的列表项样式显示?
<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light" class="<% cycle("odd", "even") %>">
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
<div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg02-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
</ul>
<% reset_cycle%>
<% end %>
编辑。更新答案
<ul class="timeline-vert timeline-light">
<% profile.jobs.order(start_date: :desc).each do |job| %>
<li class="<%= cycle("", "timeline-inverted") %>">
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
<% end %>
</ul>
您可以通过两种方式实现:
一个正在使用 cycle
助手 (http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle)。
# Alternate CSS classes for even and odd numbers...
@items = [1,2,3,4]
<table>
<% @items.each do |item| %>
<tr class="<%= cycle("odd", "even") -%>">
<td>item</td>
</tr>
<% end %>
</table>
另一个是通过 CSS (https://www.w3.org/Style/Examples/007/evenodd.en.html).
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
干杯!
我正在尝试弄清楚如何以交替格式呈现数据。
下面是两个列表项。第一个只是 "li"。第二个附有 class="timeline-inverted"。 CSS 在页面中央设置时间轴样式,我想在每一侧显示实例(按交替顺序)。
第一个列表项:
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> Aug 2010 - Nov 2012</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase">Bluepixel LLC, London</h3>
<h6 class="uppercase">Junior Designer</h6>
</div>
</div>
</li>
第二个列表项:
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
<div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> March 2013 - Jan 2014</p>
<div class="timeline-photo timeline-bg02-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase">Rocket Media, Berlin</h3>
<h6 class="uppercase">Senior Designer</h6>
</div>
</div>
</li>
在我看来,我目前拥有:
<div class="dividewhite4"></div>
<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light">
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
</ul>
<% end %>
<div class="dividewhite6"></div>
但我想说的是,每个 first/third/fifth 实例都应采用该列表格式,第二个/第四个/第六个实例应采用 "li" 格式,其中包含 class 方法附加到页面的另一边。
有人知道怎么做吗?
周期建议
尝试了下面的循环建议后,它将每个属性放入两个列表项中的每一个。我如何调整它,使每个属性只显示一次,但按时间顺序排列,以便它们以交替的列表项样式显示?
<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light" class="<% cycle("odd", "even") %>">
<li>
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
<div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg02-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
</ul>
<% reset_cycle%>
<% end %>
编辑。更新答案
<ul class="timeline-vert timeline-light">
<% profile.jobs.order(start_date: :desc).each do |job| %>
<li class="<%= cycle("", "timeline-inverted") %>">
<div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
<p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i>
<% if job.current_job == true %>
<%= job.start_date.strftime('%B %Y') %>, continuing
<% else %>
<%= job.period %>
<% end %>
</p>
<div class="timeline-photo timeline-bg01-01"></div>
<div class="timeline-heading">
<h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
<h6 class="uppercase"><%= job.title %></h6>
<p><%= job.description %></p>
</div>
</div>
</li>
<% end %>
</ul>
您可以通过两种方式实现:
一个正在使用 cycle
助手 (http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle)。
# Alternate CSS classes for even and odd numbers...
@items = [1,2,3,4]
<table>
<% @items.each do |item| %>
<tr class="<%= cycle("odd", "even") -%>">
<td>item</td>
</tr>
<% end %>
</table>
另一个是通过 CSS (https://www.w3.org/Style/Examples/007/evenodd.en.html).
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
干杯!