如何在軌道上控制彈出與紅寶石，鼠標翻轉

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

本質上，這個想法是爲您的span使用AJAX請求加載圖像創建一個mouseover動作。我們將使用緩存變量來確保您在一次頁面加載中不會多次提交相同的請求。

以下假定爲Prototype。我沒有時間去測試它，所以不要指望有一個完美的例子。

大部分工作是通過在span上添加一個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來一個叫做細胞視圖。用通用的抓取圖像消息填充空白。

所以你的部分現在看起來像：

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

而且你所謂的彈出新的觀點是這樣的：

<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