2

ユーザーがフルカレンダーで 1 日をクリックすると、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