首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求jquery库中offset在ie不兼容的解决方案!解决办法

2013-01-01 
求jquery库中offset在ie不兼容的解决方案!!!自己写了一个提示功能。页面有一个列表,然后鼠标移上去的时候通

求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>

热点排行
Bad Request.