效果:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/mynickel2000/111.GIF)
javascript实现右键菜单的方式很多,思路也各有千秋,在介绍代码之前先简单介绍一下我的右键对象思路。
1、 一个右键对象包含多个右键块。
2、 任何一个页面或控件都能且最多只能挂一个右键块。
3、 每个右键块拥有多级右键项。
4、 采用pupop方式。
下面分对象介绍源码:
公共部分:
/**
* <p>标题: BinaryStar右键菜单JS模型</p>
* <p>功能描述: 模拟右键菜单的功能。</p>
* <p>实现方法: 一个右键菜单对象由多个右键菜单块组成。每个需要右键功能的对象直接关联一个菜单块,
* 同时一个菜单块可以配多个对象关联。
* 每个菜单块包含多个菜单项。每个菜单项可能包含多个子菜单项。
* <p>作者: BinaryStar原创B/S框架</p>
* <p>版本: 0.1</p>
* <p>创建日期: 2005-12-21</p>
*/
/**
* <p>标题: BSRightItemArea</p>
* <p>功能描述: 右键菜单块。</p>
* <p>作者: BinaryStar原创B/S框架</p>
* <p>版本: 0.1</p>
* <p>创建日期: 2005-12-21</p>
*/
var
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;
"
;
var
bs_rm_info_td
=
"
FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px;layout-flow:vertical-ideographic;
"
;
var
bs_rm_info
=
"
position:absolute;top:1px;Height:20px;overflow:hidden;cursor:default;
"
;
var
bs_rm_over
=
"
BACKGROUND-COLOR: #8989bc;COLOR: #ffffff;CURSOR: default;FONT-SIZE: 12px;word-break:keep-all;white-space:nowrap;
"
;
var
bs_rm_out
=
"
BACKGROUND-COLOR: #efefef;COLOR: #000000;FONT-SIZE: 12px;word-break:keep-all;white-space:nowrap;
"
;
var
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%;
"
;
var
bs_rm_error
=
"
TEXT-DECORATION: none;CURSOR: default;FONT-SIZE: 12px;FONT-FAMILY: 宋体;background-color:red;color:window;
"
BSRightItemArea
function
BSRightItemArea(pid, index, text)
...
{
this.pid = pid||"BSRightMenu_1";//ID
this.index = index;
this.id = this.pid + "_ItemArea_" + this.index;//ID
this.leftText = text||"BS 制作";//左边显示的文字
this.itemList = new Array();//右键菜单集合
this.thisItemIndex = -1;
this.mouseType = 2; //激发的鼠标方式,缺省为右键
this.preShowFun = "";//激发右键块前的附加方法
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//添加一个右键根菜项
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.addRootItem = function (text, jsfun, img, disabled)...{
return this.addItem(-1, text, jsfun, img, disabled);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//添加一个右键菜项
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.addItem = function (pIndex, text, jsfun, img, disabled)...{
var newItem = new BSRightItem(this.pid, this.index, this.id, pIndex, this.itemList.length, text, jsfun, img, disabled);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (text.Trim() == "-" || text.Trim() == "" || text.Trim() == "sperator")...{
newItem.isSperator = true;
}
//设置父节点的子项目
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (pIndex >= 0)...{
var pobj = eval(this.pid);
this.itemList[pIndex].childList.length++;
this.itemList[pIndex].childList[this.itemList[pIndex].childList.length-1] = newItem.index;
newItem.level = this.itemList[pIndex].level+1;
pobj.setMaxLevel(newItem.level);
}
this.itemList.length++;
this.itemList[this.itemList.length-1] = newItem;
return newItem;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//菜单项块的展现
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.show = function()...{
var htmlStr = "<table border='0' cellspacing='0'>";
htmlStr += "<tr><td valign="top" bgcolor="#000000" οnclick="event.cancelBubble=true;" style=""+bs_rm_info_td+""><nobr><div style=""+bs_rm_info+"" onselectstart="window.event.returnValue=false;">"+this.leftText+"</div></nobr>";
htmlStr += "</td><td style='padding: 1' valign='bottom'>";
htmlStr += "<table width='100%' border='0' cellspacing='0'>";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (var i=0; i<this.itemList.length; i++)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (this.itemList[i].pIndex < 0)...{
htmlStr += this.itemList[i].show();
}
}
htmlStr += "</table></td></tr></table>";
return htmlStr;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//设置选中的菜单项
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.setIndexItem = function (level, thisIndex)...{
var isSelf = false;
var pobj = eval(this.pid);
var thisLevelItem = -1;
var selectObj = pobj.popupList[level].document.getElementById(pobj.id+"_selectItem");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (selectObj != null)...{
thisLevelItem = selectObj.value;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (thisIndex == thisLevelItem && thisLevelItem>=0)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (this.itemList[thisIndex].childList.length > 0)...{
this.itemList[thisIndex].childIsShow = true;
}
isSelf = true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else if (thisLevelItem >= 0)...{
var thisDiv = pobj.popupList[level].document.getElementById(this.itemList[thisLevelItem].id+"_tr");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (thisDiv != null)...{
this.itemList[thisLevelItem].setImgSelect(thisDiv, false);
this.itemList[thisLevelItem].childIsShow = false;
}
}
selectObj.value = thisIndex;
this.thisItemIndex = thisIndex;
}
return isSelf;
}
}