Chargement du code HTML dans un DIV "flottant" avec jQuery

Je suis nouveau sur jQuery et l'une des choses que j'essaie d'accomplir consiste à charger des informations sur un enregistrement sélectionné dans un "div flottant". Par exemple, je pourrais avoir une liste d'enregistrements qui, lorsque je souris sur chacun d'eux, un élément DIV flottant apparaîtrait avec des informations connexes.Chargement du code HTML dans un DIV "flottant" avec jQuery

Je sais comment charger l'information dans un élément DIV contenu dans la page mais je ne suis pas sûr de la façon dont le DIV apparaît à côté du lien que je "survole". Est-ce que jQuery a une fonction spéciale pour permettre cela?

Peut-être un exemple contribuerait à expliquer ...

<html> 
    <script type="text/javascript"> 
    function showRecordInfo(selectedRecordID) {      
     $("#divDisplayInfo").load("GetRecordInfo.aspx", 
         { recordID: selectedRecordID }); 
    } 
    </script> 
    <body> 
    <a href="#" onmouseover="showRecordInfo(1);">Record 1</a> 
    <a href="#" onmouseover="showRecordInfo(2);">Record 2</a> 
    <a href="#" onmouseover="showRecordInfo(3);">Record 3</a> 

    <div id="divDisplayInfo" style="width: 300px"></div> 
    </body> 
</html>

La page ASPX "GetRecordInfo.aspx" est une simple page ASP.NET qui accepte un paramètre post ("recordID") et affiche ensuite une table avec des informations correspondant au paramètre.

Source

2011-02-03 webworm

Cela devrait le faire

<html> 
    <!-- inlude the jquery lib here..--> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.record').mouseover(function(e){ 
      var selectedRecordID = $(this).data('id'); 
      $("#divDisplayInfo").load("GetRecordInfo.aspx", 
           { recordID: selectedRecordID }, 
           function(){ 
            $(this).css({left:e.pageX+'px', top:e.pageY+'px'}); 
           }); 
     }); 
    }); 
    </script> 
    <style type="text/css">#divDisplayInfo{position:absolute;}</style> 
    <body> 
    <a href="#" class="record" data-id="1">Record 1</a> 
    <a href="#" class="record" data-id="2">Record 2</a> 
    <a href="#" class="record" data-id="3">Record 3</a> 

    <div id="divDisplayInfo" style="width: 300px"></div> 
    </body> 
</html>

La première chose est de mettre la div être position:absolute afin que vous puissiez repositionner à volonté.

Ensuite, lorsque l'appel ajax est terminé, utilisez les événements pageX et pageY (les coordonnées de la souris) pour déplacer la div.

J'ai également modifié votre balisage et votre script pour détacher les scripts codés en dur sur les balises a.

Démo à http://www.jsfiddle.net/gaby/MwKJR/

Source

2011-02-03 03:44:15

Merci, qui a l'air vraiment sympa. Une question ... en regardant comment vous avez "détaché" les scripts codés en dur (que j'aime en passant) comment passez-vous toujours la valeur de "data-id" aux fonctions de jQuery? – webworm

@webworm, oups ... j'ai oublié d'ajouter cette partie :) * mis à jour * .. –

@webworm, a ajouté une démo ainsi .. –

Chargement du code HTML dans un DIV "flottant" avec jQuery

Répondre

Questions connexes