JQuery UI - Создать меню по клику

0

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

Заранее спасибо,

Лукас.

  • 0
    Привязать событие щелчка, определить, когда пользователь щелкнет правой кнопкой мыши, получить смещения (оба x, y), абсолютно позиционировать контейнер меню на основе этих смещений. Показать меню. Вуаля! Вы сделали :)
  • 0
    да ладно .. просматривая документы я могу найти что-то полезное api.jqueryui.com/position . Я попробую это
Показать ещё 1 комментарий
Теги:

1 ответ

2
Лучший ответ

Вот скрипка, которую я бросил вместе.

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 и width.

Удачи!

  • 0
    Именно то, что мне было нужно. Большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню