2014-01-27 63 views
1

我希望有人對此有一個想法。我正在使用FullCalendar(http://arshaw.com/fullcalendar/)插件。我添加了「prev」和「next」按鈕的其他功能來觸發其他日曆上的事件。用戶點擊按鈕轉到上一個或下一個日期後,我希望該按鈕停用1-2秒。這是我試過的。對「下一頁」和「下一個」按鈕如何禁用日期控制按鈕的FullCalendar onClick函數?

源代碼如下所示:

<td class="fc-header-left"> 
<span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"> 
    <span class="fc-text-arrow">›</span> 
</span> 
<span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on">  
    <span class="fc-text-arrow">‹</span> 
</span> 
</td> 

我的代碼:

$('.fc-button-prev span').click(function(){ 
    var spinner = createSpinner(); 
    $('.fc-button-prev').addClass('fc-state-disabled'); 
    $('.fc-button-next').addClass('fc-state-disabled'); 
    $('.fc-button-prev span').onclick = null; 
    $('.fc-button-next span').onclick = null; 
    setTimeout(function() { 
     <% @doctors.each do |doctor| %> 
      $('#calendar_<%= doctor.id %>').fullCalendar('prev'); 
     <% end %> 
     $('.fc-button-prev').removeClass('fc-state-disabled'); 
     $('.fc-button-next').removeClass('fc-state-disabled'); 

     spinner.stop(); 
    }, 2000); 

}); 

這不工作並每次按鈕微調新用戶點擊出現。如果用戶在一秒鐘內點擊3次按鈕,則會顯示三個旋鈕。此外,超時後,日曆會在前後三天跳轉。

謝謝您的幫助。

回答

3

我得到了它,使用下面的代碼2秒禁用:

$(function() { 
      $('.fc-button-prev').click(disableNextPrev); 
      $('.fc-button-next').click(disableNextPrev); 
     }); 

     function disableNextPrev() 
     { 
      $('.fc-button-prev').addClass('fc-state-disabled'); 
      $('.fc-button-next').addClass('fc-state-disabled'); 
      myVar = setTimeout(function() { 
       // your custom code goes here 
       //.... 

       $('.fc-button-prev').removeClass('fc-state-disabled'); 
       $('.fc-button-next').removeClass('fc-state-disabled'); 
       clearTimeout(myVar); 

      }, 2000); 
     }