使用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在悬停上显示数据库信息

回答

相关问题