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 回答