自己写了一个提示功能。页面有一个列表,然后鼠标移上去的时候通过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();
}
});
鼠标移到列表项上,计算该标签的位置——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();
}
});
解决方案 »
- 关于js刷新时间的问题 ,请大家指教下,谢谢
- 如何阻止刷新后弹出JavaScript对话框
- 求助json.js问题!很急高手进!
- ----------------帮我看看,这是为什么?
- 100分立即求救一个问题:如何打印出该鼠标在该页面上所有的活动坐标,都把他打印出来,如何作
- 有没有对jquery-ui比较熟的,遇到个问题
- 解除匿名函数的引用后为什么还可以输出成功 ?
- help me!谁有在客户端选择本地目录的控件或代码?急用!!!
- 如何可以做到在连接一个网页的时候,只取其中的一部分显示出来呢?用iframe来连接
- 隐藏tr的(html)style怎么写来着?
- 如何用js获取链接指向的页面中的信息
- 大家有没有遇到同样的问题-ExtJs4.0 RowEditing errorSummary
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>
嗯,谢谢。等下我试试。。我的做法是先判断制定位置是否已经存在了对应提示框(不希望每次都ajax去获取),如果没有则动态添加提示框div,然后向div里面填充ajax返回的信息关键有两点:
第一:在chrome下是正常的,在ie8(win2003)下不正常。
第二:如果在完成加载页面后,第一时间将鼠标移到每项上面提示就正常的,即使这个时候拖动滚动条;反过来,如果在完成加载后,第一时间拖动滚动条,然后移到每项上面,这个时候,提示框的位置就会错乱了
还是不行,如果在拖动滚动条和执行hover的顺序时还是会有错误。。现在提示div都不知道提示道什么地方去了。 win2003 的 ie8还是不行。chrome一直是好的
你的css是怎么写的? .rel{?} 或者你把完整的html+css给出来测试一下。还有ie8有兼容与标准模式,你都测试一下。
好的,明天我贴出来给你看看。。我记得rel样式里面只写了宽、高、行高、背景色、字体颜色等
*设置 left,top 应该是要加 'px','em'之类的参数吧??
*没有用到"队列",或者你在mouseenter时,移除mouseenter事件绑定,等 mouseleave时再绑上
rel没有写样式。。
主要是为了方便js操作谢谢!
不好意思,忘记了,找到样式了。。
.tip
{
width:200px;
position:absolute;
z-index:1000;
background: #C0C0C0;
border: 10px solid white;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
line-height:150%;
}.rel
{
height:auto;
}
.tip{
width:200px;
position:absolute;
z-index:1000;
background: #C0C0C0;
border: 10px solid white;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
line-height:150%;
}
</style>
<div onclick="change(this)">点击这里切换高度</div>
<ul>
<li><a href="#" rel="tooltip">鼠标经过这里提示</a></li>
</ul>
<script type="text/javascript">
function change(obj){
$(obj).height(parseInt(200*Math.random()));
} var tip = null;
$("ul li a[rel=tooltip]").hover(function () {
var offset = $(this).offset();
if ($(this).next("div").hasClass("tip")) {
//$(this).next("div.rel").show();
tip=$(this).next("div.tip");//先获取并不显示
} else {
tip = $("<div class='tip'>数据载入中...</div>");
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.css({ display:"block",top: (offset.top + 20), left: (offset.left + 10) });//关键问题在这
},function(){
$(this).next("div").hide();
});
</script>通过firefox,ie8测试并没发现什么问题。当然我这里是禁用了ajax测试。你的数据从ajax加载后,记得返回值最好是过滤了html的,否则容易破坏标签结构。
问题确认了因为在win2003 的ie8下,当向下拉动滚动条时,列表项的$(this).offset().top;始终为0,所以解决方法: if ($.browser.msie) {
tip.addClass("tip").css({ "top": (offset.top + 20 + yScroll), "left": (offset.left + 30) });
} else {
tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 30) });
} var yScroll = 0;
$(window).scroll(function getPageScroll() {
if (self.pageYOffset) {
yScroll = self.pageYOffset;
//xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
//arrayPageScroll = new Array('',yScroll)
return yScroll;
});