Question

我需要创建一个类似于Rdio在其网站上执行操作的弹出框。在Rdio上单击用户的缩略图时，会出现一个弹出框，其中包含用户配置文件详细信息。我想知道如何才能完成这样的事情。我正在使用Ruby on Rails开发我的网站。首先想到的是jQuery Dialogs。我还需要Ajax吗？任何想法？

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

Answer 1

肯定有很多jQuery插件可以做到这一点。我自己远离他们，因为我觉得我可以完全控制自己创造的最好的东西。如果你想要最简单，最快捷的解决方案，我会说qTip是一个非常简单的解决方案。

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

否则，您在rdio网站上看到的MIMIC的基本概念是将每个用户缩略图包装在相对div中，并为其提供第二个子节点来保存隐藏且绝对的额外数据。您可以为ID添加具有附加用户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。

您还需要使用顶部和左 css属性将信息div放置在您希望的位置。

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

收音机风格弹出框？

1 个答案: