0

我一直是一名后端开发人员，并尝试使用 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，单击即可显示它。但就我而言，我有很多对象（几百个），每个对象都非常大，我不想在加载页面时检索所有数据。所以目前当用户点击一个对象时，我简单地打开一个新页面，所有数据都在其中详细显示。我想要的是像上面的例子一样打开一个覆盖，并在其中渲染数据。

在我开始自己编写代码之前，我不熟悉 UI 开发的术语，并且很难找到它的现有实现。

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

4

2 回答 2

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
  });
});
于 2013-10-25T20:27:43.347 回答
0

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

于 2013-10-25T19:11:12.537 回答