0

私は last.fm ウィジェットを開発しています。必要条件の 1 つは、特定のタグ (ジャンル) で表示されるトラックごとに、小さなボタンが存在する必要があることです。これは、ボタンをクリックするとツールチップが表示され、特定のアーティスト、そのアルバム、および最も人気のあるトラックに関する詳細情報が表示されるようにするためです。これはすべて Ajax リクエストで行われます。

私のページはこちらに公開されています。誰かが各トラックの横にある小さな「i」ボタンアイコンをクリックしたときに表示したいツールチップを除いて、すべてを機能させることができました。

ただし、いくつかの疑問が生じます。

  1. ツールチップ用に Ajax を使用して last.fm からデータをフェッチし、押されたボタンに応じてツールチップが自動的に移動するようにツールチップを配置する必要があります。

各トラックの横に「i」アイコンを表示する私のコードは次のとおりです (CSS の後に相対的に配置されています)。

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

Ajax 関数は、選択されたトラックの数に応じて X ボタンを作成します。ただし、私が読んだことから、タグの外側（<bodyもちろんタグの内側）にツールチップを1つだけ作成する必要があり、これをプログラムでシフトする必要があります。これは正しいアプローチですか？

また、ツールチップを処理するための JQuery プラグインが大量にあるように思われることにも気付きました。問題 1) のために 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 に答える