很简单的右键菜单(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;}
页:
[1]