Я хочу создать простое меню с использованием jQuery UI в зависимости от положения курсора. Это ТОЧНО, что я хочу: http://medialize.github.io/jQuery-contextMenu/demo/dynamic-create.html, но, как я уже сказал, я хочу использовать jQuery UI. В примере http://jqueryui.com/menu/ меню всегда статично на экране, как я могу сделать это динамически (отображается рядом с щелчком мыши)?
Заранее спасибо,
Лукас.
Вот скрипка, которую я бросил вместе.
Он не идеален каким-либо образом, но делает то, что вы хотите (использует 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
и width.
Удачи!