如何在HTML中的li项目上创建右键单击自定义菜单
How to create a Right Click customized menu on li item in HTML
我的要求是我想在特定项目上打开右键单击自定义菜单。我从 js 文件得到一个
http://lablogic.net/index.php#scripts/contextmenu/right-click-menu.php
URL,但在此js文件中右键单击适用于整个页面,但我希望它只能使用一些li或标签。当用户右键单击特定的li或标签时,此右键单击菜单将打开,如果用户单击其他任何地方,则它将隐藏并打开正常的右键单击菜单。
请帮帮我.....
供参考..比如 http://www.dropbox.com 或 http://skydrive.live.com 等等。
首先,我不完全知道您想要达到哪种效果,但是当您单击文件和目录时,我会像Skydrive一样使用菜单。
可能有很多解决方案,但我可以坚持使用您找到的代码。首先 - 我们需要解码它。您可以使用一些像这样的在线 beutyfier: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 列表的下拉菜单的按钮。
jsfiddle.net
单击按钮时打开。
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
});
相关文章:
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 如何知道你右键点击谷歌chrome扩展是什么
- 我们可以在HTML中禁用右键单击锚标记吗
- 在动态crm 2011中,右键单击已完成活动的只读文本时,您是否出现错误
- 如何在jquery中为object键创建一个工作变量以避免额外的代码
- jqGrid - 在右键单击时禁止选择行
- 右键单击夜巡
- JavaScript 左键和右键单击功能
- 如何禁用右键单击以在 JavaScript 中下载图像
- Meteor:如何使用空格键创建包含两个集合数据的树列表
- 如何禁用右键单击WordPress网站
- 如何根据单击的对象在右键单击时创建多个上下文菜单
- 谷歌浏览器扩展程序:如何使用层次结构分支创建右键单击扩展程序
- 如果我创建右键单击菜单,如何保留原始复制和粘贴功能
- 如何在HTML中的li项目上创建右键单击自定义菜单
- 如何:在HTML5中创建一个右键单击函数来更改内容
- 在未按预期工作的文档上右键单击(上下文菜单)事件上创建弹出式菜单
- 创建一个表单提交按钮,启用“在新窗中打开”;当用户右键点击时
- 如何创建一个上下文菜单在dojo .or如何创建一个弹出式菜单,当我们右键单击浏览器与dojo dijit的帮助