[英]How to create a Right Click customized menu on li item in HTML
我的要求是我想在特定的li項目上打開一個右鍵單擊自定義菜單。 我有一個js文件
http://lablogic.net/index.php#scripts/contextmenu/right-click-menu.php
URL,但在此js文件中,右鍵單擊可在整個頁面上使用,但我希望它僅可使用某些li或標簽。 當用戶在那個時候右鍵單擊特定的li或標簽時,將打開該右鍵單擊菜單,如果用戶單擊其他位置,則它將隱藏並打開正常的右鍵單擊菜單。
請幫幫我...
對於初學者來說,我不完全知道您想要實現什么效果,但是當您單擊文件和目錄時,我假設它是一個類似於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覆蓋了文檔。
具有基於li列表的下拉菜單的按鈕。
單擊打開。
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.