求jquery库中offset在ie不兼容的解决方案!!!
自己写了一个提示功能。
页面有一个列表,然后鼠标移上去的时候通过ajax获取列表项的详细信息。。
做法是:
鼠标移到列表项上,计算该标签的位置——var offset = $(this).offset();
然后动态构建一个div插入该项下面,设置改div的位置即可。
tip = $("<div></div>").attr("class", "rel");
tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 10) });
现在的问题是,页面加载完成后,提示框显示的位置是正确的,
但如果在页面加载完成后,拖动滚动条,提示框显示的位置就不正确了。
js代码如下:
var tip = null;
$("ul li a[rel=tooltip]").mouseover(function () {
var offset = $(this).offset();
tip = $("<div></div>").attr("class", "rel");
if ($(this).next("div").hasClass("rel")) {
$(this).next("div.rel").show();
} else {
tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 10) });
var proName = $(this).children("span[name=proName]").text(); //流程名
var incident = $(this).children("span[name=incident]").text(); //实例号
$.ajax({
type: "get",
url: "Ajax/GetProjectDetail.aspx",
cache: false,
data: { proName: encodeURIComponent(proName), incident: incident },
success: function (msg) {
if (msg.toString() == "") {
tip.html("未查询到相关数据!");
} else {
tip.html(msg);
}
},
beforeSend: function () {
tip.html("数据载入中...");
},
error: function (res) {
tip.html("数据载入错误!");
},
afterSend: function (res) {
//tip.html("");
}
});
$(this).after(tip);
}
});
$("ul li a[rel=tooltip]").mouseout(function () {
if ($(this).next("div").hasClass("rel")) {
$(this).next("div").hide();
}
});
<script type="text/javascript">
var tip = null;
$("ul li a[rel=tooltip]").hover(function () {
var offset = $(this).offset();
if ($(this).next("div").hasClass("rel")) {
//$(this).next("div.rel").show();
tip=$(this).next("div.rel");//先获取并不显示
} else {
tip = $("<div>数据载入中...</div>").attr("class", "rel");
var proName = $(this).children("span[name=proName]").text(); //流程名
var incident = $(this).children("span[name=incident]").text(); //实例号
$.ajax({
type: "get",
url: "Ajax/GetProjectDetail.aspx",
cache: false,
data: { proName: encodeURIComponent(proName), incident: incident },
success: function (msg) {
if (msg.toString() == "") {
tip.html("未查询到相关数据!");
} else {
tip.html(msg);
}
},
error: function (res) {
tip.html("数据载入错误!");
},
afterSend: function (res) {
//tip.html("");
}
});
$(this).after(tip);
}
tip.addClass("tip").css({ display:"block",top: (offset.top + 20), left: (offset.left + 10) });//关键问题在这
},function(){
$(this).next("div").hide();
});
</script>