显示引导弹出操作异常的逻辑



我的弹出窗口出现了两个奇怪的问题,显示在fiddle

  1. 在我选择了一天(在完整日历中)并且弹出窗口显示后,我再次单击该天以隐藏弹出窗口,然后在同一天再次单击以再次显示,但没有弹出窗口!。在我单击以显示、隐藏,然后再次单击以显示我有问题之后
  2. 当我在一天内(4月20日)点击事件LimitClick事件时,然后点击当天(4月二十日)。在我点击当天之后,popover会隐藏起来,但不会像应该的那样显示当天的任何popover

以下是一些逻辑,但请参阅上面的fiddle链接以获取工作代码。

var $calPopOver;
$('#fullcalendar').fullCalendar({
  header: {
    left: 'prev,next', //today',
    center: 'title',
    right: ''
  },
  defaultView: 'month',
  editable: true,
  allDaySlot: false,
  selectable: true,
  eventLimit: 1,
  events: function(start, end, timezone, callback) {
    $.ajax({
      url: '/ManageSpaces/GetDiaryEvents/',
      dataType: 'json',
      data: {
        start: start.format(),
        end: end.format(),
        id: $("#HiddenYogaSpaceId").val()
      },
      success: function(doc) {
        var events = [];
        $(doc).each(function() {
          events.push({
            title: "1 Event", //$(this).attr('title'),
            start: $(this).attr('start') // will be parsed
          });
        });
        callback(events);
      }
    });
  },
  eventLimitText: function(numberOfEvents) {
    return numberOfEvents + " Events";
  },
  eventLimitClick: function(cellInfo, jsEvent) {
    $(cellInfo.dayEl).popover({
      html: true,
      placement: 'bottom',
      container: 'body',
      title: function() {
        return $("#events-popover-head").html();
      },
      content: function() {
        return $("#events-popover-content").html();
      }
    });
    //$(cellInfo.dayEl).popover('toggle');
    if ($calPopOver) {
      $calPopOver.popover('destroy');
    }
    $calPopOver = $(cellInfo.dayEl).popover('show');
  },
  eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
    //var s = cellInfo.segs;
    $("#eventDetails.collapse").collapse('toggle');
    if ($calPopOver)
      $calPopOver.popover('destroy');
  },
  dayClick: function(data, event, view) {
    $dayClickedDate = data.format();
    $(this).popover({
      html: true,
      placement: 'bottom',
      container: 'body',
      title: function() {
        return $("#day-popover-head").html();
      },
      content: function() {
        return $("#day-popover-content").html();
      }
    });
    //$(this).popover('toggle');
    if ($calPopOver) {
      $calPopOver.popover('destroy');
    }
    $calPopOver = $(this).popover('show');
  }
});

也许您可以看看这些引导程序示例。如果你能设法得到一份例子的副本,这只是一个简单的复制粘贴场景IMO.

http://getbootstrap.com/javascript/

在这个页面上搜索"Popovers-popover.js"并向下滚动一点以获取示例。

相关内容

  • 没有找到相关文章

最新更新