1

第一次在这里提问。我在这里使用了几个不同的线程来构建一个完整的日历，它在一个花式框中打开事件信息。更具体地说，每一天都有一个链接（结构为一个事件），它在一个花式框中打开该天事件的列表。

我使用以下代码构建了日历和花式框链接：

$('#calendar').fullCalendar({
  height: 550,
  eventClick: function(event) {
    if (event.url) {
      $("a").fancybox({
        'href'  : event.url,
        'width' : '6',
        'height'        : '100%',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'type'          : 'iframe'
      });
      return false;
    }
  },

  eventSources: [
    {
      events: [
      <?php
      $query = "SELECT date, COUNT(*) AS num_events FROM events GROUP BY date ORDER BY date";
      $result = mysql_query($query);
      $numRows = mysql_num_rows($result);
      $count = 0;
      while ($row = mysql_fetch_assoc($result))
      {
        $count++;
        $num_events = $row['num_events'];
        if ($num_events == '1') {$num_events .= ' event';}
        else {$num_events .= ' events';}
        $url = 'dayEvents.php?d='.$row['date'];
        $date = $row['date'];
        ?>
        {
        title   : '<?php echo $num_events; ?>',
        start   : '<?php echo $date; ?>',
        url : '<?php echo $url; ?> '
        }<?php if ($count < $numRows) { echo ","; } ?>
      <?php }?>                             
      ],
      color: 'white',
      textColor: '#2287c4'
    }
  ]
})

});

这是我正在经历的场景：

我点击链接A，没有任何反应。
我再次单击链接 A，fancybox 打开链接 A 的 url。我退出了fancybox。我点击链接 B，fancybox 再次打开链接 A 的 url。我退出了fancybox。我点击链接 C，fancybox 打开链接 B 的 url。此外，如果我点击日历外的任何链接，它会打开一个带有链接 C 的 URL 的花式框（这在我点击日历中的事件之前不会发生）。

本质上，链接是通过单击延迟，fancybox 正在为页面上的任何链接创建一个事件处理程序。有谁知道可能导致此问题的原因以及我可以做些什么来解决它？

谢谢。

4

1 回答 1

3

当前，每次您的用户单击事件时，您的代码都会在整个页面上的每个“a”元素上放置一个花哨的框，从而导致您看到的奇怪行为。

不要使用“eventClick”回调，而是将您的fancybox初始化代码放在“eventAfterRender”回调中。顾名思义，这个回调在每个日历事件被绘制之后被调用。这样，精美的盒子将在日历加载时初始化，并在用户单击事件时准备就绪。

此外，您需要将 jquery 选择器从 $("a").fancybox(.... 修改为 $("a",element).fancybox(... 其中 'element' 是提供给 eventAfterRender 回调的参数通过 fullcalendar（请参阅 eventAfterRender 函数上的 fullcalendar 文档）。这会将选择器限制为刚刚呈现的单个日历事件的 div。

编辑 在阅读了有关 fancybox 的更多信息后，我发现您可以直接打开它，而无需先将其附加到 <a> 元素。这可能是比我上面建议的更好的解决方案，因为除非用户实际单击日历事件，否则您不会初始化任何花式框。因此，在您的完整日历初始化中，只需将您的 eventClick 替换为以下内容：

eventClick: function(event) {
    if (event.url) {
      $.fancybox({
        'href' : event.url,
        'type' : 'iframe',
         other options as you like...
      });
      return false;
    }
  },
于 2012-08-04T17:56:54.543 回答