Rails3: change content of table column on mouseover
Given a simple view with a table:
<% entries.each do |entry| %>
<tr>
<td class="align-left"><%= entry.date.strftime("%d.%m开发者_开发技巧.%Y") %></td>
<td class="align-right><%= my_number_to_currency entry.amount_calc %></td>
<td class="align-left"><%= entry.description %></td>
<td class="align-left"><%= entry.tag %></td>
</tr>
<% end %>
I want to change the content of the second column (for every entry) to my_number_to_currency entry.amount at runtime on mouseover and change back to the original value when the mouse leaves again. In addition, I want to add another style, either a class="over" or directly set the color of the element.
I'd be grateful for any pointers how this could be best achieved in Rails3 (and where to put the code if it is needed in just one view).
(Remarks: my_number_to_currency is a simple helper, just think of normal number_to_currency and I added the JQuery-tag as I already use this for auto-complete and it therefore is available if helpful for the solution)
UPDATE
I tried the following in application.js with success:
$(document).ready(function() {
$(".joint").hover(
function() { $(this).children(".full").show(); $(this).children(".half").hide(); },
function() { $(this).children(".half").show(); $(this).children(".full").hide(); }
);
});
This might not be exactly what you're looking for, but were I in your position...
I would supply both the default and mouse-over values to the <td>
, and use jQuery hide() and show() to hide and reveal the value. This way, the information is available whether or not the user has javascript enabled (ie progressive enhancement). This also reduces the number of server calls required from constant mouse movement.
Be sure to tie in another event (rather than just mouse-over) to the effect, as tablets, iPads, iPhone, and other devices do not have hover capability.
It sounds like everything you want can (and probably should) be accomplished purely with jQuery/javascript. If you're new to jQuery, their documentation rocks.
精彩评论