0

我的要求是我想在特定的 li 项目上打开一个右键单击自定义菜单。我从

http://lablogic.net/index.php#scripts/contextmenu/right-click-menu.php

URL 但在此 js 文件中右键单击适用于整个页面，但我希望它仅适用于一些 li 或标签。当用户当时右键单击特定的 li 或标签时，此右键单击菜单打开，如果用户单击其他任何位置，则它会隐藏并打开正常的右键单击菜单。

请帮帮我......

供参考.. 像http://www.dropbox.com或http://skydrive.live.com等......

4

2 回答 2

2

对于初学者，我不完全知道您想要实现哪种效果，但我会假设它是一个类似于 skydrive 中的菜单，当您单击文件和目录时。

可能有很多解决方案，但我可以坚持使用你找到的代码。首先要做的事情-我们需要对其进行解码。你可以使用一些像这样的在线美化器：http: //jsbeautifier.org/

我已经复制了文件的代码contextmenu_o.js并得到了这个代码：

var mouse_x = 0;
var mouse_y = 0;
var mouse_left = false;
var mouse_right = false;
if (document.addEventListener != undefined) document.addEventListener('mousemove', mouseMove, true);
else if (document.layers) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = mouseMove;
document.oncontextmenu = RightMouseDown;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

function mouseMove(a) {
    mouse_x = document.all ? event.clientX + document.body.scrollLeft : document.layers ? a.x + window.pageXOffset : a.clientX + window.pageXOffset;
    mouse_y = document.all ? event.clientY + document.body.scrollTop : document.layers ? a.y + window.pageYOffset : a.clientY + window.pageYOffset
}

function RightMouseDown() {
    mouse_right = true;
    return false
}

function init(a, w) {
    var b = document.createElement("DIV");
    b.id = "contextmenu";
    if (!w) var w = 120;
    b.style.width = w + "px";
    var c = '<div style="position:relative;left:10px;top:-4px;">';
    c += a;
    c += ' <a href="http://lablogic.net/scripts/contextmenu/right-click-menu.php" target="_top" title="javascript contextmenu" alt="Free javascript menu"><font color="#565656" size="-2">Get it...</font></a>';
    c += '</div>';
    b.innerHTML = c;
    b.style.position = "absolute";
    b.style.left = "0px";
    b.style.top = "0px";
    b.style.visibility = "hidden";
    b.style.overflow = "hidden";
    b.style.padding = "4px";
    b.style.backgroundColor = "#ffffff";
    b.style.border = "1px solid #6a6868";
    document.body.appendChild(b);
    delete b
}

function mouseUp(e) {
    if (e.which == 1) document.getElementById("contextmenu").style.visibility = "hidden";
    else if (e.which == 3) mouse_right = false
}

function mouseDown(e) {
    if (e.which == 3) {
        mouse_right = true;
        document.getElementById("contextmenu").style.left = mouse_x + "px";
        document.getElementById("contextmenu").style.top = mouse_y + "px";
        document.getElementById("contextmenu").style.visibility = "visible"
    }
}

这不是最通用的代码，我们需要一些更改。我在jsfiddle上使我的更改可见，但主要是我只是用我选择的 div 覆盖文档，我正在给事件侦听器。

于 2013-10-07T11:47:00.177 回答
0

基于 li 列表的带有下拉菜单的按钮。

jsfiddle.net

点击 lbutton 打开。

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton.button({
    icons: {
        secondary: "ui-icon-triangle-1-s"
    }
})
    .click(function (event) {
    $(document).one("click", function () {
        $menuElement.css("visibility", "hidden");
    });

    $menuElement.css("visibility", "visible");
    event.stopPropagation();
});

$menuElement
    .menu({
    select: function (event, ui) {
        $menuElement.css("visibility", "hidden");
    }
})
    .css("visibility", "hidden")
    .position({
    my: "left top",
    at: "left bottom",
    of: $buttonElement
});
于 2013-10-07T11:59:54.653 回答