Question

我是jQuery的新手，我想要完成的其中一件事就是将有关所选记录的一些信息加载到“浮动div”中。例如，我可能有一个记录列表，当我鼠标悬停每个记录时，浮动DIV元素会出现相关信息。

我知道如何将信息加载到页面中包含的DIV元素中，但我不确定如何将DIV显示在我“悬停”的链接旁边。 jQuery是否有一个特殊功能允许这个？

也许一个例子可以帮助解释......

<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>

aspx页面“GetRecordInfo.aspx”是一个简单的ASP.NET页面，它接受一个post参数（“recordID”），然后显示一个包含与参数匹配的信息的表。

Answer 1

这应该这样做

<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>

首先要将div设置为position:absolute，以便您可以随意重新定位。

然后当ajax调用完成时，使用事件'pageX和pageY（鼠标坐标）来重新定位div。

我还更改了标记和脚本以分离a标记上的硬编码脚本。

http://www.jsfiddle.net/gaby/MwKJR/

演示

使用jQuery将HTML加载到“浮动”DIV中

1 个答案: