使用JQuery在懸停上顯示數據庫信息

我正在嘗試使用類似於Red Box的JQuery。我希望能夠懸停在表格中的條目上，然後有一個彈出框顯示有關從數據庫中提取的條目的信息。使用JQuery在懸停上顯示數據庫信息

我至今是在表中選擇特定元素的能力，並提醒當我將鼠標懸停在這些元素:)

所以我的問題是：如何顯示數據庫信息（使用回調，我猜猜）在從jquery懸停彈出的文本框？

感謝，
邁克爾

2009-07-09 Dirk

假設你有服務器端應用程序，可以返回正確的JSON，執行將是這樣的：

$(".item").mouseenter(function(){ 
    var postUrl = $(this).href; 
    // Get the JSON From server, and format the data into the box 
    $.getJSON(postUrl, function (data) { 
     showInfoBox(data); 
    }); 
}); 

showInfoBox = function(data) { 
    var ibox = $("#divInfoBox"); 
    $(".name", ibox).html(data.name); 
    $(".description", ibox).html(data.description); 
    // More data injection here 

    ibox.show(); 

};

相關的HTML將是這樣的：

<div id="divInfoBox"> 
    <h3 class="name"></h3> 
    <p class="description"></p> 
</div> 

<.......> 

<!-- list of the item that need database data !--> 
<ul id="itemList"> 
    <li><a href="/url/to/data?id=1">1</a></li> 
    <li><a href="/url/to/data?id=2">2</a></li> 
    <li><a href="/url/to/data?id=3">3</a></li> 
</ul>

來源

2009-07-09 15:35:12 xandy

什麼的mouseenter和懸停之間的區別？ – Dirk 2009-07-09 15:43:19

很難用單詞來解釋，請看看這裏的例子： http://docs.jquery.com/Events/mouseover#fn – xandy 2009-07-09 15:51:55

希望這個濃縮的描述有幫助，並應該與代碼xandy貼在一起：

我會創建一個動態頁面，服務於JSON。該頁面將使關鍵信息能夠將該數據返回到。然後，我會創建一個懸停的事件，該事件會將信息傳遞給有關該產品懸停的JSON的。當數據回來時，我會將該信息填充到DIV中或使用模式或工具提示插件來顯示信息。

來源

2009-07-09 15:37:49 RedWolves

一個相當簡單的方法來實現這一點是通過客戶端模板，請參閱this blog post詳細瞭解這一點。作爲總結，哪些客戶端模板的基本含義是：

你在你的頁面的一些HTML片段表示
然後使用jQuery懸停顯示元素你做一個AJAX調用服務器來獲得你想要顯示的數據。
從AJAX調用收到數據後，您使用jquery克隆html片段。
最後，您將接收到的數據注入克隆的HTML片段並顯示。

希望有所幫助你。

來源

2009-07-09 15:37:53 KnackeredCoder

頁面生成過程中，您可以創建爲每個項目一個隱藏<div>以及（如果數據不是很大），並將該數據拉入你的彈出框。這個div可以用jQuery隱藏 - 讓沒有javascript的人（即谷歌的抓取工具和文本閱讀器）仍然可以獲得「完整描述」數據。

然後，它只是成爲定位的問題/顯示您的<div>當你徘徊。 hovertip似乎是一個好的開始。

由於沒有通過一個AJAX調用請求數據會使頁面感覺更「敏感」

來源

2009-07-09 15:39:48 gnarf

使用JQuery在懸停上顯示數據庫信息

回答

相關問題