javascript - Rdio 风格弹出框？

Question

我需要创建一个弹出框，与 Rdio 在其网站上的做法非常相似。在 Rdio 上，当您单击用户的缩略图时，会出现一个带有用户个人资料详细信息的弹出框。我想知道我怎么能完成这样的事情。我正在用 Ruby on Rails 开发我的网站。首先想到的是 jQuery Dialogs。我还需要 Ajax 吗？有什么想法吗？

这是 Rdio 的链接。在右侧边栏上，将鼠标悬停在用户缩略图上，然后单击向下箭头。弹出框将出现。 http://www.rdio.com/#/artist/Kings_Of_Leon/album/Only_By_The_Night_1/

Answer 1

确实有很多 jQuery 插件可以做到这一点。我自己远离他们，因为我觉得可以完全控制我正在尽最大努力自己创造的东西。如果您想要最简单、最快捷的解决方案，我会说 qTip 是一个非常简单的解决方案。

http://craigsworks.com/projects/qtip/

否则，MIMIC 您在 rdio 网站上看到的内容的基本概念是将每个用户缩略图包装在一个相对的 div 中，并给它第二个 child 来保存隐藏的和绝对的额外数据。您可以提供附加了用户 ID 的事物 ID。然后，当查看者单击缩略图时，您可以使用 ajax 从 php 页面检索必要的 HTML。

<div class="wrap relative">
  <div class="thumbnail" id="user_1"></div>
  <div class="hidden absolute" id="userinfo_1">user info will go here</div>
</div>

现在一些简单的 JS 可以帮助您上路。

$(document).ready(function(){
  $('.thumbnail').click(function(){
    // this will get the ID of the element and extract the user ID from it
    var id = $(this).attr('id').split('_').pop();

    // use ajax and send the user id to a page to retrieve HTML
    // and place this into the hidden info div and show it
    $.get(
      "getinfo.php",
      {"user_id" : id}
      function(data){
        $('#userinfo_'+id).html(data).show();
      }
    );
  });
});

显然，您必须考虑点击 div 以某种方式重新隐藏用户信息。您可以从自动隐藏它的 php 页面在 HTML 中创建一个 X div，但这需要一些我现在不会涉及的额外 JS。

您还需要使用 top 和 left css 属性将信息 div 放置在您想要的位置。

这显然是一个非常简单的开始，但我希望它能激发您的想法。