將DIV顯示為重疊

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，單擊顯示它。 但就我而言，我有很多對象（數百個），每個對象都很大，我不想在加載頁面時檢索所有數據。 因此，當前，當用戶單擊對象時，我簡單地打開一個新頁面，其中詳細顯示了所有數據。 我想要的是打開一個覆蓋示例，然后在其中渲染數據。

在開始編寫自己的代碼之前，我不熟悉用於UI開發的術語，並且很難找到它的現有實現。

許可對我來說是個問題，因此我想堅持使用普通的jQuery和RoR。 而不是將第三方庫與各種許可方案一起使用。

Answer 1

正如我在評論中所說，您可以使用AJAX來完成此操作。 它的作用是，當您單擊鏈接時，而不是重新加載整個頁面，而是異步向服務器發送請求並返回響應，而該響應又可以在javascript中進行處理以更新頁面。

因此，在您的場景中，單擊鏈接時，只需將ajax請求發送到服務器，以檢索要在覆蓋框中顯示的數據，設置文本，然后做必要的操作以顯示覆蓋框本身。

當您嘗試處理AJAX本身時，它幾乎不會引起什么問題。 因此，我建議使用http://api.jquery.com/jQuery.ajax/處的JQuery庫的ajax API。 這更易於使用，並且與跨瀏覽器兼容。

對於這樣的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響應應使用對象詳細信息填充隱藏的元素，然后觸發顯示的內容。