jQueryを使って "floating" DIVにHTMLをロードする

私はjQueryを初めて使っています。私が達成しようとしていることの1つは、選択したレコードに関する情報を "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>

aspxページ「GetRecordInfo.aspxは」ポストパラメータ（「レコードID」）を受け入れて、テーブルを表示する単純な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するdiv要素を設定することです。

次に、ajax呼び出しが完了すると、イベントのpageXとpageY（マウス座標）を使用してdivを再配置します。

また、aタグでハードコードされたスクリプトを切り離すために、マークアップとスクリプトを少し変更しました。

デモ：http://www.jsfiddle.net/gaby/MwKJR/

出典

2011-02-03 03:44:15

ありがとう、本当にいいですね。 1つの質問..あなたがハードコードされたスクリプトをどのように "切り離し"ているのか見てみると（私が好きなところ）、どうやってjQuery関数に "data-id"の値を渡していますか？ – webworm

@webworm、oups ...その部分を追加するのを忘れました:) *更新された.. .. –

@webworm、デモも追加されました.. –

jQueryを使って "floating" DIVにHTMLをロードする

答えて

関連する問題