原理:自定义javascript中的oncontextmenu事件,然后使用div层模拟菜单。
知道了这个原理结合美工相信你可以做出很漂亮的自定义右键菜单效果。需要时我们可以把这个功能用在开发的网站后台中。
效果一:作者 cloudchen
<SCRIPT LANGUAGE="JavaScript"> function document.oncontextmenu() { d.style.visibility = "visible"; d.style.left = event.clientX+10; d.style.top = event.clientY+10; return false; } function document.onclick() { d.style.visibility = "hidden"; } </SCRIPT> <div id="d" style="position:absolute;font-family:Tahoma;font-size:12px;padding:2px;visibility:hidden"> <TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1 bgcolor="#cecece" style="font-family:Tahoma;font-size:12px;"> <TR bgcolor=#ececec> <TD>中国asp之家</TD> </TR> <TR bgcolor=#ececec> <TD>Aspxhome.com</TD> </TR> <TR bgcolor=#ececec> <TD>mr.chen</TD> </TR> <TR bgcolor=#ececec> <TD>mr.chen</TD> </TR> <TR bgcolor=#ececec> <TD>mr.chen</TD> </TR> <TR bgcolor=#ececec> <TD>mr.chen</TD> </TR> </TABLE> </div> [提示:你可先修改部分代码,再按运行]
但如何把“链接”的对应参数传到菜单上,例如:这个链接 hehe.php?id=1 右击后可以得到id=1的参数.
作者: 我佛山人
<SCRIPT LANGUAGE="JavaScript"> function document.oncontextmenu() { oDel.href="del.php?id="+event.srcElement.oID oEdit.href="edit.php?id="+event.srcElement.oID oAdd.href="add.php?id="+event.srcElement.oID d.style.visibility = "visible"; d.style.left = event.clientX+10; d.style.top = event.clientY+10; return false; } function document.onclick() { d.style.visibility = "hidden"; } </SCRIPT> <span oID=1>id=1</span><br> <span oID=2>id=2</span><br> <span oID=3>id=3</span><br> <span oID=4>id=4</span> <div id="d" style="position:absolute;font-family:Tahoma;font-size:12px;padding:2px;visibility:hidden"> <TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1 bgcolor="#cecece" style="font-family:Tahoma;font-size:12px;"> <TR bgcolor=#ececec> <TD><a href="" id=oDel>删除</a></TD> </TR> <TR bgcolor=#ececec> <TD><a href="" id=oEdit>编辑</a></TD> </TR> <TR bgcolor=#ececec> <TD><a href="" id=oAdd>添加</a></TD> </TR> </TABLE> </div> [提示:你可先修改部分代码,再按运行]