Question

我在http://jsfiddle.net/paul724/HXb6v/上找到了一些jquery事件日历的例子。它可以正常工作，直到我改变月份 - 鼠标停止工作。只有onChange才有效。

在示例中至少有一个错误： $("a").mouseover它应该是$(".ui-state-default").mouseover

我在jquery datepicker ui - lose hover after next previous中发现了类似的问题但对我没有帮助。

你能帮我吗？

非常感谢

Answer 1

问题在于缺少功能：

onChangeMonthYear: function () {
    setTimeout(function() {
        updateRefs();
    }, 0);  
}

整个代码：

<div id="dialog"></div>
<div id="datepicker"></div>

<script type="text/javascript">
    $(document).ready(function() {
        var activeDays = [1,4,10,21,22,23,27,28,30];
        $('#datepicker').datepicker({
            dateFormat: 'yy-m-d',
            inline: true,

            //show only selected days
            beforeShowDay: function(date) {
                var hilight = [false,''];
                if ( activeDays.indexOf( date.getDate() ) > -1) {
                    hilight = [true,'isActive'];
                }
                return hilight;
            }, 
            //update references after month change
            onChangeMonthYear: function () {
                setTimeout(function() {
                    updateRefs();
                }, 0);  
            },

            /* onSelect freezes the dialog box and populates with a link
            want to populate the dialog on hover and then freeze so that link can be followed*/    
            onSelect: function(date) {
                $('#dialog').dialog({ autoOpen: false });
                var detail = $(".ui-state-default.ui-state.hover").html();
                $('#dialog').attr('title', "changed");
                $('#dialog').html( '<a href="http://www.xxx/addoreditevent.php?id=1">' + "<span style='color: #7f7fff; font-weight: lighter;'>" + '(edit)  ' + ' date: ' + date + ' </span></a>');
                //now open the dialog
                $('#dialog').dialog('open');
                }
        });

        //create dialogue
        //title could be set once, and before createing dialogue
        $('#dialog').attr('title', 'events');
        var dlg = $('#dialog').dialog({
            autoOpen: false,
            draggable: false,
            resizable: false,
            width: 650
        });


        function updateRefs() {
            $(".ui-state-default").mouseover(function() {
              dlg.dialog("open");
            //open dialogue  
            }).mousemove(function(event) {
              dlg.dialog("option", "position", {
                my: "left top",
                at: "right bottom",
                of: event,
                offset: "20 20"
              });
              //write dialogue text, html could be set dynamicaly, title not !
              var dateF = $(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text();  
              $('#dialog').html( '<a href="http://www.xxx/addoreditevent.php?id=2">' + "<span style='color: #7f7fff; font-weight: lighter;'>" + '(edit)  ' + 'text: ' + $(this).text() + 'date: ' + dateF + ' </span></a>');
            //close dialogue  
            }).mouseout(function() {
                dlg.dialog("close");
            });
        }

        updateRefs();
        }); 

</script>

jquery datepicker - 在月更改后鼠标悬停不起作用

1 个答案: