1

我正在尝试使用类似于Red Box的 JQuery 做一些事情。我希望能够将鼠标悬停在表格中的条目上，然后弹出一个框，显示有关从数据库中提取的条目的信息。

到目前为止，我能够选择表格中的特定元素，并在我将鼠标悬停在这些元素上时发出警报 :)

所以我的问题是：如何在从 jquery 悬停弹出的文本框中显示数据库信息（我猜是使用回调）？

谢谢，
迈克尔

4

4 回答 4

5

假设您有可以返回正确 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-09T15:35:12.270 回答
1

您也可以在页面生成期间为每个项目创建一个隐藏<div>项（如果数据不是很大），并将该数据拉到您的弹出框中。这个 div 可以用 jQuery 隐藏 - 使没有 javascript 的人（即谷歌的爬虫和文本阅读器）仍然可以获得“完整描述”数据。

然后它就变成了<div>当你悬停时定位/显示你的问题。hovertip似乎是一个好的开始。

不必通过 AJAX 调用请求数据将使页面感觉更“响应”

于 2009-07-09T15:39:48.190 回答
0

希望这个简明的描述有所帮助，并且应该与 xandy 发布的代码一起使用：

我将创建一个提供 JSON 的动态页面。该页面将获取关键信息以便能够拉回该数据。然后，我将创建一个悬停事件，它将有关悬停产品的信息传递给 JSON。当数据返回时，我会将该信息填充到 DIV 中，或者使用模式或工具提示插件来显示信息。

于 2009-07-09T15:37:49.037 回答
0

实现这一点的一个相当简单的方法是通过客户端模板，有关详细信息，请参阅此博客文章。总而言之，客户端模板的基本含义是：

  1. 您的页面中有一些 HTML 片段代表悬停显示元素
  2. 然后使用 jquery 对服务器进行 AJAX 调用以获取要显示的数据。
  3. 在收到来自 AJAX 调用的数据后，您使用 jquery 来克隆 html 片段。
  4. 最后，将接收到的数据注入到克隆的 HTML 片段中并显示。

希望对您有所帮助。

于 2009-07-09T15:37:53.497 回答