並べ替えキー列の背景色を強調してみる。

列タイトルをクリックすると、その列をキーにして並べ替えを行うが、現状では列タイトルに▲▼マークが表示されるだけで、視覚的な変化に気付き難い。縞模様リスト表示の技を生かして、並べ替え列のカラーも強調表示してみた。もちろん、縞模様リスト表示との合わせ技。見た目はこんな感じになった。(縞模様も少し濃くしてみた。)

ヘルパーファイルの設定

並べ替えのキー列かどうかを判定するselected(column_name)メソッドを追加した。キー列なら「selected」を返し、そうでなければ「free」を返す。

# ----- app/helpers/application_helper.rb -----
  def stripe
    @stripe = !@stripe
    @stripe ? "stripe_dark" : "stripe_light"
  end
  
  def selected(column_name)
    column_name == @order_field ? "selected" : "free"
  end
end

上記ペルパメソッドを利用して、<th>、<td>タグにクラスを設定する。

<th>タグ

6行目<th class=<%= selected(column.name) %>...のようにクラスを設定した。

<%# ----- app/views/models/softwares/_listh.rhtml ----- %>
...(途中省略)...
<tr>
  <% for column in Software.columns %>
    <% unless @controller.class.hidden_field?(@action_name, column.name) %>
      <th class=<%= selected(column.name) %> width=<%= cell_width[column.name].to_s %>% >
      <%= link_to_remote "#{@direction_mark if @order_field==column.name}#{human_attribute_name(Software, column.name)}", 
                :update => "list_update", 
                :submit => "store", 
                :url => {:action => 'list_update', 
                         :order_field => column.name, 
                         :order_direction => @order_next_direction} %>
      </th>
...(途中省略)...
<td>タグ

5行目<td class=<%= selected('title') %>>のように追記する。(以下は途中省略しているが、すべての列に追記する。)

<%# ----- app/views/models/softwares/_listd.rhtml ----- %>
<!--[:]-->
    <tr class=<%= stripe %>>
      <%- unless @controller.class.hidden_field?(@action_name, 'title') -%>
        <td class=<%= selected('title') %>>
          <%= link_to h(human_attribute_value(listd, 'title')), 
                  URI.encode(listd.url), :popup => true  %></td>
                  <%# :popup => ['new_window_name', 'height=300,width=600'] %>
      <%- end -%>

      <%- unless @controller.class.hidden_field?(@action_name, 'description') -%>
        <td class=<%= selected('description') %>>
          <%=h human_attribute_value(listd, 'description') %></td>
      <%- end -%>
...(途中省略)...

スタイルシートで、背景色を設定

並べ替えキー列の背景色を、3パターン追記した。

/* ----- app/public/stylesheets/scaffold.css ----- */
/* 縞模様リストの設定 */
table tr.stripe_light td { 
  background-color: white;/* 明るい縞模様 */
} 

table tr.stripe_dark td { 
  background-color: azure;/* 暗い縞模様 */
} 

/* 並べ替えキー列の設定 */
table tr th.selected { 
  background-color: #D6D6D6;/* キー列のタイトル */
} 

table tr.stripe_light td.selected { 
  background-color: #E4E4E4;/* キー列の明るい縞模様 */
} 

table tr.stripe_dark td.selected { 
  background-color: #D7E4E4;/* キー列の暗い縞模様 */
} 


以上の設定で、縞模様リスト表示と、並べ替えキー列の強調表示が可能になる。工夫すれば、もっと面白い視覚効果が実現できそうだ!