如何在任何位置显示涅槃提库，径向菜单

Question

我不熟悉JavaScript，我是jQuery的初学者！ 我从网络上找到了 RadMenu 插件，并希望使用它，以便它在我单击的文档上的任何位置打开，而不仅仅是一个固定位置。

$(function() {
        jQuery("#radial_container").radmenu({
            listClass: 'list',
            itemClass: 'item',
            radius: 100,
            animSpeed: 400,
            centerX: 30,
            centerY: 100,
            selectEvent: "click",
            onSelect: function($selected) {
                alert("you clicked on .. "
                + $selected.index());
            },
            angleOffset: Math.PI,
            onShow: function($menuitems) {
                $menuitems.each(function(i) {
                    var $this = jQuery(this);
                    setTimeout(function() {
                        $this.fadeIn(500);
                    }, i * 100);
                });
            }
        });
    });

我正在尝试使用 onClick 或鼠标悬停方法实时更新 centerX 和 centerY 值，但它没有得到更新。

请建议我该怎么做才能使其工作。

Answer 1

这

可以通过在发生单击事件时更改包含径向菜单的<div>的top和left属性来实现。例如

$(document).click(function (e) {
  $('#radial_container').css('left', (e.pageX - 30) + 'px');
  $('#radial_container').css('top', (e.pageY - 40) + 'px');
  $("#radial_container").radmenu("show");
});

这是一个带有工作版本的小提琴，您可以进一步使用：http://jsfiddle.net/munderwood/7asLq/

我用来移动圆心的两个值-30和-40只是因为它们看起来或多或少有效而选择。它们会随着菜单的半径、文本大小等而变化，但我将它们保留了下来，以便您看到相对于鼠标光标如何以及在何处移动菜单。