並べ替えキー列の背景色を強調してみる。
列タイトルをクリックすると、その列をキーにして並べ替えを行うが、現状では列タイトルに▲▼マークが表示されるだけで、視覚的な変化に気付き難い。縞模様リスト表示の技を生かして、並べ替え列のカラーも強調表示してみた。もちろん、縞模様リスト表示との合わせ技。見た目はこんな感じになった。(縞模様も少し濃くしてみた。)
ヘルパーファイルの設定
並べ替えのキー列かどうかを判定する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;/* キー列の暗い縞模様 */ }
以上の設定で、縞模様リスト表示と、並べ替えキー列の強調表示が可能になる。工夫すれば、もっと面白い視覚効果が実現できそうだ!