将HTML加载到“浮动"窗口中用jQuery进行DIV [英] Loading HTML into "floating" DIV with jQuery
问题描述
我是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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
