将HTML加载到“浮动"窗口中用jQuery进行DIV

本文介绍了将HTML加载到“浮动"窗口中用jQuery进行DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是jQuery的新手，我要完成的一件事情是将有关选定记录的某些信息加载到浮动div"中.例如，我可能有一个记录列表，当我将鼠标悬停在每个记录上时，将出现一个带有相关信息的浮动DIV元素.

I am new to jQuery and one of the things I am trying to accomplish is to load some information about a selected record into a "floating div". For example I might have a list of records that as I mouseover each one a floating DIV element would appear with related information.

我知道如何将信息加载到页面中包含的DIV元素中，但是我不确定如何使DIV出现在我悬停"的链接旁边. jQuery是否具有特殊功能来允许这样做?

I know how to load the information into a DIV element contained within the page but I am unsure of how to have the DIV appear next to the link that I "hover" over. Does jQuery have a special function to allow for this?

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

Perhaps an example would help explain ...

<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页面，该页面接受一个后置参数("recordID")，然后显示一个包含与该参数匹配的信息的表.

The aspx page "GetRecordInfo.aspx" is a simple ASP.NET page that accepts a post parameter ("recordID") and then displays a table with information matching the parameter.

推荐答案

这应该做到

<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，以便您可以随意重新放置它.

First thing is to set the div to be position:absolute so you can re-position it at will.

然后，当ajax调用完成时，使用事件的pageX和pageY(鼠标坐标)重新定位div.

Then when the ajax call completes use the events' pageX and pageY (the mouse coordinates) to relocate the div.

我还对您的标记和脚本进行了一些改动，以分离a标签上的硬编码脚本.

I have also altered you markup and script a bit to detach the hardcoded scripts on the a tags.

演示在 http://www.jsfiddle.net/gaby/MwKJR/

这篇关于将HTML加载到“浮动"窗口中用jQuery进行DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！