以上介绍了右键菜单的实现思路和原代码。下面说明应用举例。
<html>
<head>
<style>
/*BS右键菜单*/
.bs_rm_div {
BACKGROUND-COLOR: #efefef;
BORDER-BOTTOM: #ffffff 1px outset;
BORDER-LEFT: #ffffff 1px outset;
BORDER-RIGHT: #ffffff 1px outset;
BORDER-TOP: #ffffff 1px outset;
FILTER: Alpha(Opacity='95');
POSITION: absolute;
z-index:999;
}
.bs_rm_info_td
{
FONT-SIZE: 14px;
color:#FFFFFF;
font-family:@Tahoma,@宋体;
width:20px;
layout-flow:vertical-ideographic;
}
.bs_rm_info{
position:absolute;
top:1px;
height:20px;
overflow:hidden;
}
.bs_rm_over {
BACKGROUND-COLOR: #8989bc;
COLOR: #ffffff;
CURSOR: default;
FONT-SIZE: 12px;
}
.bs_rm_out {
BACKGROUND-COLOR: #efefef;
COLOR: #000000;
FONT-SIZE: 12px;
}
.bs_rm_sperator {
BORDER-BOTTOM: #ffffff 1px inset;
BORDER-LEFT: #ffffff 1px inset;
BORDER-RIGHT: #ffffff 1px inset;
BORDER-TOP: #ffffff 1px inset;
WIDTH: 95%;
}
</style>
<SCRIPT language=javascript src="bsrightmenu.js"></SCRIPT>
<script type='text/javascript'>
/*---去空格---*/
String.prototype.Trim = function()
{
return this.replace(/(^/s*)|(/s*$)/g, "");
}
String.prototype.LTrim = function()
{
return this.replace(/(^/s*)/g, "");
}
String.prototype.RTrim = function()
{
return this.replace(/(/s*$)/g, "");
}
var TestFrame_rmMenu = new BSRightMenu("TestFrame_rmMenu");
var rmTestArea = TestFrame_rmMenu.addItemArea("自定义右键菜单");
/*参数:1、父菜单索引(添加的顺序,0开始)
* 2、显示文字。
* 3、执行的js方法。
* 4、图片:建议16*16
* 5、disabled。true:不可用,false:可用;
*/
rmTestArea.addItem(-1, "菜单一", "alert('菜单一')", "", true);
rmTestArea.addItem(-1, "菜单二", "", "save.gif");
rmTestArea.addItem(1, "菜单二_1", "alert('菜单二_1')", "");
rmTestArea.addItem(1, "-", "", "");
rmTestArea.addItem(1, "菜单二_2", "alert('菜单二_2')", "");
rmTestArea.addItem(2, "改变菜单一的可用", "setItemDisabled(0)", "");
rmTestArea.addItem(2, "菜单二_1_2", "alert('菜单二_1_2')", "");
rmTestArea.addItem(4, "菜单二_2_1", "alert('菜单二_2_1')", "");
rmTestArea.addItem(4, "-", "", "");
rmTestArea.addItem(4, "菜单二_2_2", "alert('菜单二_2_2')", "");
function setItemDisabled(inindex){
TestFrame_rmMenu.itemAreaList[0].itemList[inindex].disabled=!TestFrame_rmMenu.itemAreaList[0].itemList[inindex].disabled;
}
function doRight(){
TestFrame_rmMenu.doRightMenu(0);
}
</script>
</head>
<body>
<div οnmοuseup="doRight()" style="cursor:default;">右键测试Div</div>
<input id="" type="button" value="右键测试Button" οnmοuseup="doRight()"/>
<script type='text/javascript'>
document.onmouseup = function(){TestFrame_rmMenu.doRightMenu(-1);};
</script>
</body>
</html>