2

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

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

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

$(this).qtip('destroy')在不使用和定义时可以观察到这种行为solo: false。

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

完整示例可在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>
4

2 回答 2

0

这不会以这种方式工作。因为您在 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

于 2013-06-18T11:22:29.480 回答
-2

亲爱的朋友，您必须添加 qtip css 链接，然后它将完美运行....

<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
于 2018-02-06T11:53:09.903 回答