很简单的右键菜单(html5版本)

近期用js和jquery开发日历组件，学会了不少js的东西。不过因为不会css，所以效果都是从别的网站“拿”过来的。:)

<div id="calMenu" style="display: none; position: absolute; left: 63px; top: 259px; z-index: 999;" class="rgtbox">
<div><a href="#">编辑</a><em> </em></div>
<div><a href="#">删除</a><em> </em></div>
</div>
<ul id="menu">
 <li>示例1</li>
 <li>示例2</li>
</ul>

$('#menu').bind('contextmenu', function (){
  $('#calMenu').show();
  ....
})

然后给目标元素添加oncontextmenu事件，不过contentxmenu是html 5的标准属性，html 4是没有，所以这个菜单也依赖于浏览器实现。另外具体的菜单位置需要捕获event对象的clientX和clientY去计算。这里不再给出。
html 5标准属性详见：http://www.w3school.com.cn/html5/html5_ref_standardattributes.asp

附上样式代码，因为我自己不太懂，随意把相关的都贴出来(ff,chrome下基本通过，ie下不出现hover效果，不知道为什么)：

body {
    color:#333333;
    font-family:Verdana,arial,Helvetica,sans-serif;
    font-size:100%;
    font-weight:normal;
}
.rgtbox {
	background-color: #f4f4f4;
	border: 1px solid #828387;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.rgtbox div {
	background-color: #f4f4f4;
	display: block;
	text-align: right;
	line-height: 20px;
	border: 1px solid #f4f4f4;
	clear: both;
	text-align: left;
	padding-left: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.rgtbox div:hover {
	border: 1px solid #b0b0b0;
	color: #828282;
	background-color: #e5e5e5;
	clear: both;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.rgtbox div.hovercolor {
	border: 1px solid #b0b0b0;
	color: #828282;
	background-color: #e5e5e5;
	clear: both;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.rgtbox div.hovercolor,.rgtbox div:hover {
	color: #828282;
}

.rgtbox div em {
	padding-right: 20px;
	padding-left: 20px;
	font-style: normal;
}

评论

3 楼 Teok 2009-11-19  

tust_05102405 写道

源码贡献出来吧，嗯，开源是王道~

呵呵。因为我不懂css，所以把css也贴出来了。实在懒的去请教我公司那帮粗糙的美工了~:)
在html5之前实现起来，应该代码多一点。

2 楼 tust_05102405 2009-11-19  

tust_05102405 写道

源码贡献出来吧，嗯，开源是王道~

不好意思，JS脚本就两行呀，被我无视了，呵呵~

1 楼 tust_05102405 2009-11-19  

源码贡献出来吧，嗯，开源是王道~