开发者

MouseOver toggle a div in Rails

开发者 https://www.devze.com 2023-04-01 10:54 出处:网络
I have an index page of Tasks which I generated from a scaffold. In order to make it a little more visually appealing, I\'d like to hide the edit view and delete links unless there is a mouseover eve

I have an index page of Tasks which I generated from a scaffold.

In order to make it a little more visually appealing, I'd like to hide the edit view and delete links unless there is a mouseover event on the title.

<% @tasks.each do |task| %>
  <tr>
    <td><%= task.name %> - <%= link_to 'Move onto '+task.name+' and start its clock', task_start_path(task) %></td开发者_Python百科>
    <td>/ <%= link_to 'Rename task', edit_task_path(task) %></td>
    <td>/ <%= link_to 'Check its clocks', task %></td>
    <td>/ <%= link_to 'Destroy task', task, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

Is there a clean way to do this in the index.html.erb file or do I need to call some custom helper javascript functions?

I found Hide a DIV [Rails] but it toggles on click rather than on mouseover.


You should use Unobtrusive JavaScript in rails 3. You can put a special class on the and on the elements that you want to hide (or on the links themselves).

Something like:

<% @tasks.each do |task| %>
  <tr class="hide_on_hover">
    <td><%= task.name %> - <%= link_to 'Move onto '+task.name+' and start its clock', task_start_path(task) %></td>
    <td class="hideable">/ <%= link_to 'Rename task', edit_task_path(task) %></td>
    <td>/ <%= link_to 'Check its clocks', task %></td>
    <td class="hideable">/ <%= link_to 'Destroy task', task, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

and then in your application.js file you would add javascript to fire on document load, find those elements and add the hover actions. If you're using JQuery (recommended) you can see an easy way to do that (with examples) here: http://api.jquery.com/hover/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号