如何使用 ruby​​ on rails 控制弹出窗口，鼠标悬停

Question

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

这里是主页和弹出菜单的链接

<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 请求加载图像。我们将使用缓存变量来确保您不会在一次页面加载中多次发出相同的请求。

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

大部分工作都是通过向 span 添加 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 之外的部分中的所有内容移动到称为单元格的视图中。用通用的 Fetching images 消息填补空白。

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

<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