如何使用 ruby​​ on Rails 控制弹出窗口，鼠标滚动

Question

我有一个应用程序，用户可以在其中查看单元格列表。对于每个单元格，用户可以看到该单元格的两个图像作为弹出菜单。问题是，选择列表时会下载所有图像，这使得我的页面非常慢。 我希望仅当鼠标悬停在链接上时才下载图像。 有关信息：我正在使用 DOM 弹出工具包 链接文本

这里是主页并链接到弹出菜单

<div id="span_div">
    <span id="cell_link_<%= @cell.cellid %>" class="popup_link" Popup.modal = true><%= @cell.cellname%>
     <%= render :partial => 'cell_popup' %>
     <%= javascript_tag "new Popup('cell_popup_#{@cell.cellid}','cell_link_#{@cell.cellid}')" %>
    </span>
  </div>

这里是细胞图像的一部分

<div id="cell_popup_<%= @cell.cellid %>" class="popup popup_draghandle" style="display:none">
<table width="418" border="0">
  <tr>
    <td width="201" align="center" valign="top">Raw</td>
    <td width="201" align="center" valign="top">Repaired</td>
  </tr>
  <tr>
    <td align="center" valign="top">
        <% if @full_report == true then%>
        <%raw_morph = @raw_morph.last%>
        <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
        <%end%>
    </td>
    <td align="center" valign="top">
        <%if @repaired == true then%>
        <%repaired_morph = @repaired_morph.last%>
        <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>

    </td>
  </tr>
  <%end%>
</table>

有人有任何想法吗？

Answer 1

本质上，这个想法是为您的跨度创建一个鼠标悬停操作，通过 AJAX 请求加载图像。我们将使用缓存变量来确保您不会在一页加载中多次发出相同的请求。

以下假设为原型。我没有时间测试它，所以不要指望一个完美的例子。

大部分工作是通过向跨度添加 on mouseover 属性来完成的。

<span id="cell_link_<%= @cell.cellid %>" class="popup_link" Popup.modal = true 
  onmouseover="<%=remote_function(:update => "cell_popup_#{@cell.cellid}", 
    :url => 
      popup_cell_url(@cell, :full_report => @full_report, :repaired => @repared),
    :success => "cell_#{@cell.cellid}_loaded = true", 
    :conditions => "cell_#{@cell.cellid}_loaded == false") %>"
 ><%= @cell.cellname%>

现在清理一下：

将部分中除 div 之外的所有内容移至名为 cell 的视图。用通用的“获取图像”消息填补空白。

所以你的部分现在看起来像：

<div id="cell_popup_<%= @cell.cellid %>" class="popup popup_draghandle" style="display:none">
  Fetching images. Please stand by.
</div>

而你的名为 popup 的新视图看起来像：

<table width="418" border="0">
  <tr>
    <td width="201" align="center" valign="top">Raw</td>
    <td width="201" align="center" valign="top">Repaired</td>
  </tr>
  <tr>
    <td align="center" valign="top">
        <% if @full_report == true then%>
                <%raw_morph = @raw_morph.last%>
                <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
                <%end%>
    </td>
    <td align="center" valign="top">
        <%if @repaired == true then%>
                <%repaired_morph = @repaired_morph.last%>
                <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
        <%end%>
    </td>
  </tr>

</table>

现在剩下的就是将控制器连接到新视图并为 AJAX 做好准备。
添加响应单元控制器获取的弹出路由。

 map.resources :cells, :member => {:popup => :post}

将操作添加到 CellsController

def popup
  # sets @cell, @repaired, @full_report, @raw_morph, 
  # @repaired_morph and anything else needed by the popup view.
end