Jquery - 上下文菜单 - 右键单击
我使用 jquery 插件 - ContextMenu。 - http://abeautifulsite.net/blog/2008/09/jquery- context-menu-plugin/
我在页面中央有一个 div。我在点中有背景图像。我需要它只使用 jquery 右键单击背景图像。如果单击背景图像，那么我想显示上下文菜单。如果单击 id 为 divPage 的 div，则不会发生任何情况。
感谢您的建议或可能的其他解决方案。
HTML
<body>
<form id="formBackground" method="post">
<ul id="myMenu" class="contextMenu">
<li class="insert"><a href="#insert">Add New</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
</ul>
<div id="divPage">
Text.
</div>
</form>
CSS
body, html {
height: 100%;
}
body{
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-image: url('../images/backgrounds/bg.jpg');
background-repeat:no-repeat;
background-position:top;
}
div#divPage{
width: 800px;
height: 300px;
margin: auto;
}
JS
$('body').bind('mousedown', function (evt) {
switch (evt.which) {
case 3:
if(evt.target == $('body')[0]) {
//Show context menu
}
break;
}
});
I use a plugin for jquery - ContextMenu. -
http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
I have a div in the center of the page. I have the background-image in the points. I need it to only using jquery rightclick on the background-image. If you click on the background-image, so I want to display the ContextMenu. If you click the div with id divPage, nothing Happens.
Thanks for the advice or Possibly another solution.
HTML
<body>
<form id="formBackground" method="post">
<ul id="myMenu" class="contextMenu">
<li class="insert"><a href="#insert">Add New</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
</ul>
<div id="divPage">
Text.
</div>
</form>
CSS
body, html {
height: 100%;
}
body{
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-image: url('../images/backgrounds/bg.jpg');
background-repeat:no-repeat;
background-position:top;
}
div#divPage{
width: 800px;
height: 300px;
margin: auto;
}
JS
$('body').bind('mousedown', function (evt) {
switch (evt.which) {
case 3:
if(evt.target == $('body')[0]) {
//Show context menu
}
break;
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你把事情过于复杂化了。
首先，我在创建上下文菜单的代码中的任何位置都看不到您的
List。其次，您需要做的是：
I think you are over-complicating things.
Firstly I do not see your
Listanywhere in your code that creates the context menu.Secondly all you need to do is:
为什么不让上下文菜单在点击 div 时弹出呢？如果您需要仅通过单击背景图像来显示菜单，则需要将图像放入 div 本身并设置其样式，使其像背景图像一样工作。你可以使用 css z-index 和绝对位置来做到这一点
why not let the contextmenu pop up when the div itself is clicked? if you need to show up the menu only by clicking on the bg image you need to put the image in the div itself and style it so it acts like an bg image. you can do this with css z-index and position absolute