我正在尝试使用类似于Red Box的 JQuery 做一些事情。我希望能够将鼠标悬停在表格中的条目上,然后弹出一个框,显示有关从数据库中提取的条目的信息。
到目前为止,我能够选择表格中的特定元素,并在我将鼠标悬停在这些元素上时发出警报 :)
所以我的问题是:如何在从 jquery 悬停弹出的文本框中显示数据库信息(我猜是使用回调)?
谢谢,
迈克尔
假设您有可以返回正确 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>
您也可以在页面生成期间为每个项目创建一个隐藏<div>
项(如果数据不是很大),并将该数据拉到您的弹出框中。这个 div 可以用 jQuery 隐藏 - 使没有 javascript 的人(即谷歌的爬虫和文本阅读器)仍然可以获得“完整描述”数据。
然后它就变成了<div>
当你悬停时定位/显示你的问题。hovertip似乎是一个好的开始。
不必通过 AJAX 调用请求数据将使页面感觉更“响应”
希望这个简明的描述有所帮助,并且应该与 xandy 发布的代码一起使用:
我将创建一个提供 JSON 的动态页面。该页面将获取关键信息以便能够拉回该数据。然后,我将创建一个悬停事件,它将有关悬停产品的信息传递给 JSON。当数据返回时,我会将该信息填充到 DIV 中,或者使用模式或工具提示插件来显示信息。
实现这一点的一个相当简单的方法是通过客户端模板,有关详细信息,请参阅此博客文章。总而言之,客户端模板的基本含义是:
希望对您有所帮助。