显示一个覆盖覆盖的DIV

我一直是一个后端开发人员，并试图通过使用RoR来完成一些UI工作。显示一个覆盖覆盖的DIV

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

我已经完成了这一点。

现在，当用户点击Object1，我想显示的物体的细节（类似于http://jquerytools.org/demos/overlay/index.htm的东西）

我明白样品中的代码。

您有隐藏的div，只需点击一下即可显示它。但在我的情况下，我有很多对象（几百个），每个对象都非常大，我不想在加载页面时检索所有数据。所以当前当用户点击一个对象时，我简单地打开一个新的页面，其中所有的数据都是详细的显示。我想要的是打开一个覆盖像例子，并在其中呈现数据。

我并不熟悉用于UI开发的术语，并且在开始编写我的所有自我之前，有一个寻找现有实现的硬类型。

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

来源

2013-10-25 Raza

请有一些示例代码，并张贴有关你有一个具体的问题之前，自己尝试一下。 –

你必须使用ajax！ –

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

因此，在您的场景中单击链接时，您必须向服务器发送ajax请求，检索要在叠加框中显示的数据，设置文本，然后执行需要的操作以显示叠加盒本身。

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

对于这样一个div：

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

可以使用somehing这样的：

$("#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-25 20:27:43

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

来源

2013-10-25 19:11:12

显示一个覆盖覆盖的DIV

回答

相关问题