0

私はMartin Wendt's jQuery Context-menu pluginを扱っています。私はそれをFullCalendarプラグインに統合しようとしています。問題は、イベントを右クリックしても何も起こりません。したがって、コンテキストメニューが飛び出すことはありません。FullCalendarを使用したJQueryコンテキストメニューの同化

私は、カレンダーを表示する私にdefault.htmlファイルに次のjqueryのコードを持って:あなたが見ることができるようにコードと間違って何もないように私は完全に有効にする手順に従っているので、それはそう

 $('#calendar').fullCalendar({ 
      eventRender: function(event, element) { 
       var originalClass = element[0].className; 
       element[0].className = originalClass + ' hasmenu'; 
      }, 
      // 
     }); 

     $('#calendar').contextmenu({ 
      delegate: '.hasmenu', 
      menu: [ 
       {title: 'Copy', cmd: 'copy', uiIcon: 'ui-icon-copy'}, 
       {title: '----'}, 
       {title: 'More', children: [ 
        {title: 'Sub 1', cmd: 'sub1'}, 
        {title: 'Sub 2', cmd: 'sub1'} 
        ]} 
       ], 
      select: function(event, ui) { 
       alert('select ' + ui.cmd + ' on ' + ui.target.text()); 
      } 
     }); 

イベントを右クリックするとjqueryコンテキストメニューがポップアウトされます。ここでは、コンテキスト・メニューのプラグインのために必要な依存関係です:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" 
    rel="stylesheet" /> 
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<script src="assets/jquery.ui-contextmenu.min.js"></script> 

それを満たすために、私のセクションの初めに、私はFullCalendarとのContextMenuの依存関係を含める:

<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' /> 
<link href='../fullcalendar.min.css' rel='stylesheet' /> 
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' /> 
<script src='../lib/moment.min.js'></script> 
<script src='../lib/jquery.min.js'></script> 
<script src='../fullcalendar.min.js'></script> 
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script> 
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script> 
<script src='../jquery.ui-contextmenu.min.js'></script> 

jquery.ui-contextmenu.min.jsファイルは、メインフォルダにバンプされています。ここでは、私のfullcalendar.min.jsが存在することがわかります。

答えて

0

上記のコードに基づいて、コンテキストメニューが表示されますが、カレンダーのビットの後ろに表示され、アクセスできないフィドルを作成しました。

https://jsfiddle.net/xc7styt5/

enter image description here

あなたはそれが機能するはずクラスUI-コンテキストメニューのzインデックスを変更した場合。

https://jsfiddle.net/p52gohwn/

.ui-contextmenu { 
    z-index: 1; 
} 

(より良い方法があるかもしれません)

+0

投稿後、私はあなたが設定気づい**サブ1 **と**サブ2 **のメニュー項目の両方に** CMDを持っています: 'sub1' **あなたが意図したものではない可能性があります – smcd

関連する問題