jQuery로 "floating"DIV에 HTML로드하기

저는 jQuery를 처음 사용하고 있으며, 달성하고자하는 것 중 하나는 선택한 레코드에 대한 정보를 "floating div"에로드하는 것입니다. 예를 들어 내가 마우스를 올리면 각 요소에 부동 DIV 요소가 관련 정보와 함께 표시되는 레코드 목록이있을 수 있습니다.jQuery로 "floating"DIV에 HTML로드하기

페이지에 포함 된 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>

영문 페이지 "GetRecordInfo.aspx는"다음 포스트 매개 변수 ("recordID와")를 허용하는 간단한 ASP.NET 페이지이고 테이블을 표시합니다 매개 변수와 일치하는 정보.

출처

2011-02-03 webworm

이것은

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

우선 그래서 당신이 의지에 그것을 위치를 다시 할 수 position:absolute가 될 사업부를 설정하는 것입니다해야한다.

그러면 ajax 호출이 완료되면 'pageX'와 'pageY'(마우스 좌표) 이벤트를 사용하여 div의 위치를 변경합니다.

a 태그에서 하드 코드 된 스크립트를 분리하기 위해 마크 업과 스크립트를 약간 변경했습니다.

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

출처

2011-02-03 03:44:15

감사합니다. 정말 멋지군요. 하나의 질문 .. 어떻게 하드 코드 된 스크립트를 "분리"했는지 살펴 보았는데, jQuery 함수에 "data-id"값을 전달하는 방법은 무엇입니까? – webworm

@webworm, oups ... 그 부분을 추가하는 것을 잊었습니다 :) * updated * .. –

@webworm, 데모도 추가했습니다 .. –

jQuery로 "floating"DIV에 HTML로드하기

답변

관련 문제