Question

我一直是一名后端开发人员，并尝试使用RoR进行一些UI工作。

I have a list object that I want to display.
Object1
Object2
Object3
Object4
...

我做了这一点。

现在当用户点击Object1时，我想在对象中显示细节（类似于http://jquerytools.org/demos/overlay/index.htm）

我理解样本中的代码。

您显示隐藏的div，只需点击一下即可显示。但在我的情况下，我有很多对象（几百个），每个对象都非常大，我不想在加载页面时检索所有数据。所以当前用户点击一个Object时，我只需打开一个新页面，其中所有数据都是详细显示的。我想要的是打开一个类似于例子的叠加层，并在其中渲染数据。

在开始编写自己的代码之前，我不熟悉用于UI开发的术语，并且有一种难以找到它的现有实现的类型。

许可对我来说是一个问题，所以我想坚持使用vanilla jQuery和RoR。而不是使用具有各种许可方案的第三方库。

Answer 1

正如我在评论中所说，你可以使用AJAX来做到这一点。它的作用是，当你点击链接而不是重新加载整个页面时，它会异步地向服务器发送请求并返回响应，而响应又可以在javascript中处理以更新页面。

因此，在单击链接的情况下，您只需向服务器发送ajax请求，检索要在覆盖框中显示的数据，设置文本，然后根据需要显示覆盖盒子本身。

当您尝试处理它时，AJAX可能会导致很少的问题。所以我建议使用这里找到的JQuery库的ajax API：http://api.jquery.com/jQuery.ajax/。这更容易使用，也可以跨浏览器兼容。

对于这样的div：

<div id="overlay"></div>
<button id="load">Load Box</button>

你可以使用这样的东西：

$("#load").click(function(){
  //ajax request
  $.ajax({
    url: "your/web/service.aspx",
    cache: false
  })
  .done(function(response_text){
     //setting the response got to the overlay box
     //this can be a plain text or html or json. 
     //you need to set the box appropriately.  
     $("#overlay").text(response_text);
     //then do the needful to display overlay box
  });
});

Answer 2

正如Lakshmi在评论中所提到的，您应该使用Ajax方法加载和显示过度数据。您的Ajax响应应该用对象详细信息填充隐藏元素，然后触发过度显示。

将DIV显示为叠加层

2 个答案: