小需求:能在一个网页上鼠标点击一下,就在鼠标点击处浮现一个div,里面包含了鼠标点击的项对应的一些后台数据。
简单思路:在网页上放置一个隐藏的div,在鼠标点击时间里想办法获取到需要展示的值赋值给div,然后给div的位置赋值,然后显示这个div。
获取到要展示的值
很简单,参考上一篇博文,使用xmlhttprequest,传入点击对象的信息到后台服务,然后获取到服务处理之后的响应。
给div位置赋值
这个是个老大难了,使用了position:absolute; related 等等都有个各种问题,网上有很多介绍这些东西的内容就不详述了,后来发现使用jquery来做赋值很简单。看下面的代码,只需要在网页点击的对象处事件响应用showDiv;然后在隐藏的div处事件响应用hideDiv,就ok了
function showDiv(e){
ee=arguments.callee.caller.arguments[0] || window.event; //此行很重要,为了适配不同浏览器
var url ="getsomething.php?enb="+e.innerHTML;
var showstr;
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
showstr =xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,false);
xmlhttp.send();
$("#showTip").html(showstr);
$("#showTip").css("top",ee.clientY );
$("#showTip").css("left",ee.clientX );
$("#showTip").show();
}
function hideDiv(){
$("#showTip").hide();
}
隐藏的div,最重要的是 position:fixed这个style
<div ondblclick='hideDiv()' id='showTip' style='background-color: #F5F5DC; position: fixed; display: none; '></div>