QTip 显示在错误的位置

发布于 2024-12-20 23:00:56 字数 2404 浏览 1 评论 0原文

我正在尝试显示 qtip 以响应用户单击全日历中的某一天。

这在 Chrome 中工作正常，但在 Firefox 和 Internet Explorer 中，qtip 在错误的位置打开。

这可以通过点击不同的日期来看到，有时qtip会在错误的位置打开，有时会打开然后立即关闭。

当不使用 $(this).qtip('destroy') 以及定义 solo: false 时，可以观察到此行为。

当您第一次在单元格内单击时，似乎会发生这种情况，如果您随后在同一单元格内移动鼠标并再次单击，qtip 将显示在正确的位置。该单元格将继续正常工作，直到页面刷新。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="fullcalendar.css">
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css">
</head>
<body>
    <div id="calendar"></div>

    <script type="text/javascript" src="jquery-1.6.3.js"></script>
    <script type="text/javascript" src="jquery.qtip.js"></script>
    <script type="text/javascript" src="fullcalendar.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#calendar').fullCalendar({
                dayClick: dayclick
            });
        });

        function dayclick(date, allday, jsevent) {
            var randomContent = new Date().valueOf().toString();
            $(this).qtip({
                overwrite: true,
                content: {
                    text: randomContent,
                    title: {
                        text: 'Testing',
                        button: 'Close'
                    }
                },
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                style: {
                    tip: true
                },
                position: {
                    viewport: $(window),
                    target: 'mouse',
                    my: 'bottom center',
                    at: 'top center',
                    adjust: {
                        mouse: false
                    }
                },
                hide: {
                    fixed: true,
                    delay: 300
                },
                events: {
                    hide: function () {
                        $(this).qtip('destroy');
                    }
                }
            }, jsevent);
        }
    </script>
</body>
</html>

原文

I'm trying to display a qtip in response to the user clicking on a day in fullcalendar.

This works correctly in chrome but firefox and internet explorer the qtip opens in the wrong location.

This can be seen by clicking on different days, sometimes the qtip will open at the wrong location, other times it will open then immediately close.

This behaviour can be observed when not using $(this).qtip('destroy') and when solo: false is defined.

It seems to happen the first time you click inside a cell, if you then move the mouse within the same cell and click again the qtip displays at the correct position. That cell well then continue to work correctly until the page is refreshed.

The full example is available at https://gist.github.com/1467702

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="fullcalendar.css">
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css">
</head>
<body>
    <div id="calendar"></div>

    <script type="text/javascript" src="jquery-1.6.3.js"></script>
    <script type="text/javascript" src="jquery.qtip.js"></script>
    <script type="text/javascript" src="fullcalendar.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#calendar').fullCalendar({
                dayClick: dayclick
            });
        });

        function dayclick(date, allday, jsevent) {
            var randomContent = new Date().valueOf().toString();
            $(this).qtip({
                overwrite: true,
                content: {
                    text: randomContent,
                    title: {
                        text: 'Testing',
                        button: 'Close'
                    }
                },
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                style: {
                    tip: true
                },
                position: {
                    viewport: $(window),
                    target: 'mouse',
                    my: 'bottom center',
                    at: 'top center',
                    adjust: {
                        mouse: false
                    }
                },
                hide: {
                    fixed: true,
                    delay: 300
                },
                events: {
                    hide: function () {
                        $(this).qtip('destroy');
                    }
                }
            }, jsevent);
        }
    </script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自控 2024-12-27 23:00:56

这不会以这种方式工作。因为您没有在 dayClick 函数中保留元素。

如果您的要求适合您，请尝试这种方式！

$(document).ready(function () {

/* Dont care about this code for generating event, Starts Here */
var myEvents = [];
var date = new Date();
var y = date.getFullYear();
var length = 12;

for (var month = 1; month < length; month++) {
    var month = (month <= 9) ? '0' + month : month;
    var startdate = y + '-' + month + '-10';
    var enddate = y + '-0' + month + '-15';
    myEvents.push({
        title: 'event',
        start: startdate,
        //end: enddate,
        description: 'event Of ' + startdate,
        allDay: true
    });
}

/* Dont care about this code for generating event, Ends Here */


$('#myCalendar').fullCalendar({
    events: myEvents,
    eventRender: function(event, element) {
        element.qtip({
           show: 'click',
           hide: { when: { event: 'unfocus' } },
           content: event.description
        });
    }
});

});

请参阅此Fiddle

This wont work in this way. because you don't have the hold of element inside the dayClick Function.

Try in this way, if your requirement suits to you!

$(document).ready(function () {

/* Dont care about this code for generating event, Starts Here */
var myEvents = [];
var date = new Date();
var y = date.getFullYear();
var length = 12;

for (var month = 1; month < length; month++) {
    var month = (month <= 9) ? '0' + month : month;
    var startdate = y + '-' + month + '-10';
    var enddate = y + '-0' + month + '-15';
    myEvents.push({
        title: 'event',
        start: startdate,
        //end: enddate,
        description: 'event Of ' + startdate,
        allDay: true
    });
}

/* Dont care about this code for generating event, Ends Here */


$('#myCalendar').fullCalendar({
    events: myEvents,
    eventRender: function(event, element) {
        element.qtip({
           show: 'click',
           hide: { when: { event: 'unfocus' } },
           content: event.description
        });
    }
});

});

Refer this Fiddle

回复收藏 0 原文

智商已欠费 2024-12-27 23:00:56

亲爱的朋友，你必须添加 qtip css 链接，然后它才能完美工作......

<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

Dear friend you have to add qtip css link then it will work perfectly....

<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

回复收藏 0 原文

~没有更多了~

关于作者

软糖

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

QTip 显示在错误的位置

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

QTip 显示在错误的位置

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。