怎么做右键菜单? 我想做个右键菜单,在右击某个class的div的时候就弹出菜单,不知道怎么弄? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 直接找jquery在context插件吧, 不需要自己研发, 人家已经做得很好了http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html 我从jquery官网下了右击菜单的插件,直接拷贝的官网的例子,什么效果也没有,不知道问题出在哪儿?<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="/js/jquery.contextmenu.r2.js"></script><script type="text/javascript"> $("div.roomunit").contextMenu('myMenu1', { bindings: { 'open': function(t) { alert('Trigger was '+t.id+'Action was Open'); }, 'email': function(t) { alert('Trigger was '+t.id+'Action was Email'); }, 'save': function(t) { alert('Trigger was '+t.id+'Action was Save'); }, 'delete': function(t) { alert('Trigger was '+t.id+'Action was Delete'); } } });</script> <div class="contextMenu" id="myMenu1"> <ul> <li id="open"> Open</li> <li id="email"> Email</li> <li id="save"> Save</li> <li id="close"> Close</li> </ul> </div>有一个class='roomunit'的div,为什么不行,没有报错,但是firefox错误控制台有警告:时间戳: 2012-4-9 23:30:20警告: 预期为 ':' 但却得到 ';'。 声明被丢弃。源文件:http://127.0.0.3/行:0这什么意思,还有0行? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>无标题页</title> <style type="text/css"> body { background: #222; font: 14px 'Microsoft Yahei' , Arial; } ul, li { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: #000; } #wrap { width: 800px; height: 550px; border: 1px solid #FF9C00; background: #F0E6AF; position: relative; margin: .5em auto; } #wrap ul { background: #eee; border: 1px solid #999; width: 150px; position: absolute; display: none; -moz-box-shadow: 3px 3px 9px #999; -webkit-box-shadow: 3px 3px 9px #999; -o-box-shadow: 3px 3px 9px #999; box-shadow: 3px 3px 9px #999; } #wrap ul li { border-bottom: 1px solid #ddd; line-height: 24px; } #wrap li.no { border-bottom: none; } #wrap ul li a { display: block; padding-left: .5em; } #wrap ul li a:hover { background-color: #FFBD00; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); }; var EventUnit = {addHandler: function(element, type, handler) {//添加事件处理程序 if(element.addEventListener) { element.addEventListener(type, handler, false); } else if(element.attachEvent) { element.attachEvent('on' + type, handler); } else { element['on' + type] = handler; }; }, getEvent: function(event) { return event ? event : window.event; }, preventDefault: function(event) {//取消事件默认动作 if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }; } } EventUnit.addHandler(window, 'load', function() { var wrap = $('wrap'); var menu = $('menu'); var menuStyle = menu.style.display; var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; var w = 0, h = 0; var left = 0, top = 0; EventUnit.addHandler(wrap, 'contextmenu', function(event) { event = EventUnit.getEvent(event); EventUnit.preventDefault(event); menu.style.display = 'block'; w = menu.clientWidth; h = menu.clientHeight; left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; menu.style.left = left + 'px'; menu.style.top = top + 'px'; }); EventUnit.addHandler(document, 'click', function() { menu.style.display = menuStyle; }); }); </script></head><body> <div id="wrap"> <p> 单击右键看效果~</p> <ul id="menu"> <li><a href="#">撤销</a></li> <li><a href="#">重做</a></li> <li><a href="#">复制</a></li> <li><a href="#">粘贴</a></li> <li><a href="#">大小写转换</a></li> <li><a href="#">回车</a></li> <li><a href="#">拼写检查</a></li> <li><a href="#">新建</a></li> <li><a href="#">自定义</a></li> <li><a href="#">图形选项</a></li> <li class="no"><a href="#">关闭</a></li> </ul> </div></body></html> 请教一下,(function(){})()是什么意思啊? 如何在网页内弹出一个对话框? 这个产品显示效果作的太好了。高手请教下怎么学习它? js 替换问题 求助javaScript怎么切换浏览器内核 各位大哥谁有可输入,并且输入后相似的字段会自动跑上来的下拉菜单的源码? 时间运行错误问题 高分求助!外带介绍MM 向各位来大请教个树的简单问题 没有提示信息,关闭整个不是弹出的框架? javascript <% %>问题 高手请进 —— select转成弹出div
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.contextmenu.r2.js"></script><script type="text/javascript">
$("div.roomunit").contextMenu('myMenu1', {
bindings: {
'open': function(t) {
alert('Trigger was '+t.id+'Action was Open');
},
'email': function(t) {
alert('Trigger was '+t.id+'Action was Email');
},
'save': function(t) {
alert('Trigger was '+t.id+'Action was Save');
},
'delete': function(t) {
alert('Trigger was '+t.id+'Action was Delete');
}
}
});
</script> <div class="contextMenu" id="myMenu1">
<ul>
<li id="open"> Open</li>
<li id="email"> Email</li>
<li id="save"> Save</li>
<li id="close"> Close</li>
</ul>
</div>有一个class='roomunit'的div,为什么不行,没有报错,但是firefox错误控制台有警告:
时间戳: 2012-4-9 23:30:20
警告: 预期为 ':' 但却得到 ';'。 声明被丢弃。
源文件:http://127.0.0.3/
行:0
这什么意思,还有0行?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
body
{
background: #222;
font: 14px 'Microsoft Yahei' , Arial;
}
ul, li
{
list-style: none;
padding: 0;
margin: 0;
}
a
{
text-decoration: none;
color: #000;
}
#wrap
{
width: 800px;
height: 550px;
border: 1px solid #FF9C00;
background: #F0E6AF;
position: relative;
margin: .5em auto;
}
#wrap ul
{
background: #eee;
border: 1px solid #999;
width: 150px;
position: absolute;
display: none;
-moz-box-shadow: 3px 3px 9px #999;
-webkit-box-shadow: 3px 3px 9px #999;
-o-box-shadow: 3px 3px 9px #999;
box-shadow: 3px 3px 9px #999;
}
#wrap ul li
{
border-bottom: 1px solid #ddd;
line-height: 24px;
}
#wrap li.no
{
border-bottom: none;
}
#wrap ul li a
{
display: block;
padding-left: .5em;
}
#wrap ul li a:hover
{
background-color: #FFBD00;
}
</style> <script type="text/javascript">
function $(id) {
return document.getElementById(id);
}; var EventUnit = {addHandler:
function(element, type, handler) {//添加事件处理程序
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
};
},
getEvent: function(event) {
return event ? event : window.event;
},
preventDefault: function(event) {//取消事件默认动作
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
};
}
} EventUnit.addHandler(window, 'load', function() {
var wrap = $('wrap');
var menu = $('menu');
var menuStyle = menu.style.display;
var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight;
var w = 0, h = 0;
var left = 0, top = 0; EventUnit.addHandler(wrap, 'contextmenu', function(event) {
event = EventUnit.getEvent(event);
EventUnit.preventDefault(event); menu.style.display = 'block';
w = menu.clientWidth;
h = menu.clientHeight;
left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w;
top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h;
menu.style.left = left + 'px';
menu.style.top = top + 'px';
}); EventUnit.addHandler(document, 'click', function() {
menu.style.display = menuStyle;
});
});
</script></head>
<body>
<div id="wrap">
<p>
单击右键看效果~</p>
<ul id="menu">
<li><a href="#">撤销</a></li>
<li><a href="#">重做</a></li>
<li><a href="#">复制</a></li>
<li><a href="#">粘贴</a></li>
<li><a href="#">大小写转换</a></li>
<li><a href="#">回车</a></li>
<li><a href="#">拼写检查</a></li>
<li><a href="#">新建</a></li>
<li><a href="#">自定义</a></li>
<li><a href="#">图形选项</a></li>
<li class="no"><a href="#">关闭</a></li>
</ul>
</div>
</body>
</html>