0

我正在开发一个 last.fm 小部件，其中一个必要条件是，对于显示特定标签（流派）的每个曲目，必须存在一个小按钮。这样，当单击按钮时会出现一个工具提示，显示有关某个艺术家、他们的专辑和他们最受欢迎的曲目的更多信息。这一切都是通过 Ajax 请求完成的。

我的页面在这里。除了工具提示之外，我已经设法让一切正常工作，当有人单击每个轨道旁边的小“i”按钮图标时，我想显示它。

但是，出现了一些问题：

  1. 我需要使用 Ajax 从 last.fm 中获取工具提示的数据，然后定位工具提示，以便它根据按下的按钮自动移动。

我在每个轨道旁边显示“i”图标的代码就是这个（与 CSS 相对定位）：

<dd class="lfm_info"><img src="images/info.png" /></dd>

Ajax 函数根据已选择的轨道数创建 X 按钮。但是，根据我一直在阅读的内容，应该只创建一个工具提示，在任何标签之外（<body当然是在标签内），并且应该以编程方式进行转换。这是正确的方法吗？

我还注意到似乎有大量的 JQuery 插件来处理工具提示，并且由于问题 1) 我什至没有设法让一个工作) - 我不知道如何定位它们，所以他们如果我将标签放在我的重复曲目之外，它会出现在我页面的随机位置，<div>如果我把它放在那些所说的标签内，甚至根本不会出现。您认为哪个是处理/创建工具提示的最佳插件？我想要一些干净的东西，并且可以轻松处理自动定位。

感谢您的阅读，我希望有人可以帮助我。

4

1 回答 1

1

这是一个基本的例子。它实际上非常简单，但显然在不了解完整的用户场景的情况下，它会出现需要您进行调整的问题。

演示：http: //jsfiddle.net/dj9xS/3/

问题：

  1. 不检测窗口的侧面，因此工具提示可能位于窗口之外。
  2. 如果不再次单击“i”图像，则没有使工具提示消失的事件。

HTML：

<style>
    dl { width: 300px; margin: 0 auto; }
    .lfm_info { position: relative; width: 16px; }
    .tooltip { display: none; background: black; width: 120px; position: absolute; bottom: 20px; left: 50%; margin-left: -68px; color: #fff; padding: 10px; }

</style>
<dl>
          <dt class="lfm_art">
          <a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
          <img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
        <dd class="lfm_song">2. Californication2. Californication</dd>
        <dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
    <dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="tooltip"></div></dd>
      </dl>


<dl id="ajaxReference">
          <dt class="lfm_art">
          <a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
          <img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
        <dd class="lfm_song">2. Californication2. Californication</dd>
        <dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
    <dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="tooltip"></div></dd>
      </dl>
​

jQuery：

$('.lfm_info').click(function(){
    var toolTip = $(this).children('.tooltip');

        // Get data using AJAX
        // Not sure how you are requesting data, maybe by unique ID? Need to put into each track dl to 
        // reference. e.g. $(this).parent().attr('id');

    // If success populate into tooltip on $(this).children('.tooltip')
        // $(this).children('.tooltip').text(ajaxData);   

        toolTip.text('Hello World');

    // If fail  
        // return false;

    if(toolTip.is(':visible')){
        toolTip.fadeOut(500); 
        return false;    
    };       


    // Check if any other tooltips are visible    
    if($('.tooltip').is(':visible')) {
        $('.tooltip').fadeOut(500, function(){        
            toolTip.fadeIn(500);        
        });  
    } else {
        toolTip.fadeIn(500);    
    };       

});​

我希望这对你有帮助。

于 2012-10-18T23:34:11.103 回答