1

行。在用户控制器的显示页面上，我有这个<div/>：

<div class="globalwidth" id="picshow">
</div>

<div class=fadecontent></div>

另外，在用户页面上，我有这个：

<% @photos.each do |p| %>
<%=  link_to image_tag(p.image(:medium)), photo_path(p), remote: true %>
<% end %>

上面的链接假设将用户带到照片控制器的显示操作（_show.html.erb），它显示了更大版本的图像。我想在用户页面中使用 ajax 将其作为部分加载<div/>，#picshow同时使其看起来像一个弹出窗口。

我在照片目录中创建了一个 show.js.erb ......

$('#picshow').html('<%=j render partial: 'photos/show' %>')
loadPopup()

而且我还调用了我在 application.js 文件中的这个函数，使它看起来像一个淡入淡出的弹出窗口......仅供参考，fadecontent 是我在用户显示中的另一个 div，它应该使所有内容都在后面弹出窗口消失了。

var popupStatus = 0;

function loadPopup() {
    if(popupStatus==0) {
        $(".fadecontent").fadeIn("slow");
        $(".largepic").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup() {
    if(popupStatus==1) {
        $(".fadecontent").fadeOut("slow");
        $(".largepic").fadeOut("slow");
        popupStatus = 0;
    }
}

这是照片的显示控制器和动作：

def show

@photo = Photo.find(params[:id])
  respond_to do |format|
  format.js
    end 
 end

这就是我在照片控制器的 _show.html.erb 中所拥有的

<div class="largepic">
    <div class="largeimage left">
        <%=image_tag @photo.image(:large) %>
    </div>
</div>

这是CSS

.largepic {
    position: absolute;
    z-index: 10;
    margin: 125px auto;
    left: 15px;
    width: 930px;
    display: none;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.largeimage {
    padding: 18px;
}

.largeimage p {
    font-size: 75%;
    line-height: 19px;
    width: 450px;
}

基本上，我希望照片/节目的一部分在 div 中呈现为部分，ID 为“picshow”，同时看起来像一个可以转义或固定的弹出窗口。默认没有显示。loadPopup 函数中的 fadeIn 使其显示。

4

1 回答 1

0

由于您提到 AJAX 是您的主要关注点，因此这里有一个工作示例。此示例最初加载较小的图像。单击较小的图像后，使用 AJAX 加载较大的图像，并使用转义键将照片重置为较小的图像。您应该能够对其进行修改以实现您的目标。

应用程序/视图/照片/index.html.erb

<div id="photo-image">
    <%= render partial: 'photos/photo_image', locals: { width: 50, height: 64 } 5>
</div>

应用程序/视图/照片/_photo_image.html.erb

<%= link_to image_tag('rails.png', width: "#{width}", height: "#{height}", photo_path(1), remote: true %>

应用程序/视图/照片/show.js.erb

$('#photo-image').html("<%= escape_javascript(render partial: 'photos/photo_image', locals: { width: '110', height: '128' }) %>")

$(document).keyup(function(evt) {
    if (evt.keyCode == 27) {
        $('#photo-image').html("<%= escape_javascript(render partial: 'photos/photo_image', locals: { width: '50', height: '64' }) %>")
    }
});

应用程序/控制器/photos_controller.rb

class PhotosController < ApplicationController
    def show 
        respond_to do |format|
            format.js
        end
    end
end

我希望这能解决你的问题。如果您需要任何解释，请发表评论。

更新：您的问题有“在弹出窗口中加载部分内容”，但在您的描述中没有说“弹出窗口”。如果您想在弹出窗口中显示部分内容，则需要更新 app/views/photos/show.js.erb。我希望你能弄清楚这一点。

于 2013-06-11T01:44:12.630 回答