顯示一個覆蓋覆蓋的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

回答

相關問題