jQuery UI - 點擊創建菜單

我想根據遊標的位置使用jQuery UI製作一個簡單的菜單。這完全是我想要的：http://medialize.github.io/jQuery-contextMenu/demo/dynamic-create.html但正如我所說的，我想使用jQuery UI。在示例http://jqueryui.com/menu/中，菜單在屏幕上始終是靜態的，我怎樣才能使它在dinamically（顯示在鼠標點擊附近）？jQuery UI - 點擊創建菜單

在此先感謝，

盧卡斯。

來源

2014-02-20 lucasdc

綁定點擊事件，確定用戶何時右鍵單擊，獲取偏移量（包括x，y），根據偏移量絕對定位菜單容器。顯示菜單。瞧！你完成了:) – Jack

是的好..看着文檔我可以找到有用的東西https://api.jqueryui.com/position/。伊瑪試穿吧 – lucasdc

酷！如果你需要幫助，我會在今晚晚些時候把小提琴放在一起。 – Jack

這是我扔在一起的小提琴。

http://jsfiddle.net/uG2EE/

這是不以任何方式完美，但你想要做什麼（用了jQuery UI，顯示了當上下文菜單事件被觸發近光標 - 或者右鍵點擊）

不幸的是，我必須將jQuery UI腳本粘貼到腳本窗格中，因此您需要滾動到最底部。這是我加入到得到這個工作的JS：

$(function() { 
    // Set initial state (isVisible) then initialize menu 
    $("#menu").data('isVisible', false).menu(); 

    // Initialize event handlers 
    $(document).on({ 
     // Click is responsible for closing the menu, when it is visible 
     'click': function(e){ 
      if(e.which === 1 && $('#menu').data('isVisible')){ 
       $("#menu").css({ 
       'display' : 'none' 
       }).data('isVisible', false); 
      } 
     }, 
     // "onContextMenu" event is fired when user right clicks. We prevent the 
     // default by calling e.preventDefault(), and then display our jQuery-UI menu 
     'contextmenu': function(e){ 
      var x = e.clientX, 
       y = e.clientY; 

      e.preventDefault(); 

      // Check state (isVisible) to see if menu needs to be displayed 
      if($('#menu').data('isVisible') === false) { 
       $("#menu").css({ 
       'display' : 'block', 
       'left' : x + 10, 
       'top' : y + 10 
       }).data('isVisible', true); 
      } 
     } 
    }); 
});

的CSS是非常簡單的：display:none，position:absolute和寬度。

祝你好運！

來源

2014-02-20 22:24:20 Jack

正是我需要的。非常感謝你！ – lucasdc

jQuery UI - 點擊創建菜單

回答

相關問題