JavaScript实现右键菜单（一）

来源：互联网发布：淘宝店铺名片设计网站编辑：程序博客网时间：2024/05/01 13:44

效果：

javascript实现右键菜单的方式很多，思路也各有千秋，在介绍代码之前先简单介绍一下我的右键对象思路。

1、一个右键对象包含多个右键块。

2、任何一个页面控件都能且最多只能挂一个右键块。

3、每个右键块存在独立的右键项体系。

4、每个右键块可以同时挂在不同的控件上。

根据以上规则，一个右键菜单模型包含：BSRightMenu(右键对象)、BSRightItemArea（有件块对象）和BSRightItem右键项对象。下面具体介绍每个对象。

一、BSRightItem右键项对象

/**

* 标题: BSRightItem

* 功能描述: 右键菜单项。

* 作者: BinaryStar

* 版本: 0.1

* 创建日期: 2005-12-21

function BSRightItem(pid, areaIndex, areaId, pIndex, index, text, jsfun, img, disabled){

this.pid = pid||"BSRightMenu_1";//BS右键菜单对象ID

this.areaIndex = areaIndex;//右键块索引

this.areaId = areaId||"";//BS右键菜单块ID

this.pIndex = pIndex;//父菜单项索引

this.level = 0;//树的深度

this.index = index;//本菜单项索引

this.id = this.areaId + "_item_" + this.index;//ID

this.text = text || "BS菜单项";//菜单项文字

this.jsfun = jsfun;//菜单项js函数

this.img = img||"";//菜单项图片

this.childList = new Array();//该菜单项包含的子菜单项

this.isSperator = false;//是否是分隔符

this.thisItemIndex = -1;//当前鼠标所在的子菜单项索引。

this.disabled = disabled || false;//该菜单项是否可用

this.childIsShow = false;//孩子菜单正在展现

this.setDisabled = function (flag){

if (flag){

this.disabled = true;

}

else{

this.disabled = false;

}

//菜单项的展现

this.show = function(){

var htmlStr = "";

htmlStr += "<tr id=/""+this.id+"_tr/" class=/"bs_rm_out/"";

htmlStr += " onmouseover=/""+this.pid+".itemAreaList["+this.areaIndex+"].itemList["+this.index+"].doOnmouseover(this)/"";

htmlStr += " onmouseout=/""+this.pid+".itemAreaList["+this.areaIndex+"].itemList["+this.index+"].doOnmouseout(this)/"";

if (!this.isSperator && !this.disabled){

htmlStr += " onmouseup=/""+this.pid+".itemAreaList["+this.areaIndex+"].itemList["+this.index+"].doOnmouseup(this)/"";

htmlStr += " onmousedown=/""+this.pid+".itemAreaList["+this.areaIndex+"].itemList["+this.index+"].doOnmousedown(this)/"";

}

else{

htmlStr += " onmouseup=/"window.event.cancelBubble=true;return false;/"";

htmlStr += " onmousedown=/"window.event.cancelBubble=true;return false;/"";

}

htmlStr += " onclick=window.event.cancelBubble=true;return false;";

htmlStr += ">";

//图片

if (!this.isSperator){

htmlStr += "<td align=/"right/" style=/"width:22px;height:20px;";

if (this.img.Trim() != ""){

htmlStr += "background: url("+this.img+");";

htmlStr += "background-repeat: no-repeat;";

htmlStr += "background-attachment: no-fixed;";

htmlStr += "background-position: center;/"";

}

htmlStr += " valign=/"middle/"> </td>";

//文字

htmlStr += "<td><nobr";

if (this.disabled){

htmlStr += " style=/"color:Gray;/"";

}

htmlStr += "> "+this.text+"  </td>";

//存在孩子时显示箭头。

htmlStr += "<td style='font-family: webdings;'>";

if (this.childList.length > 0){

htmlStr += "4";

}

htmlStr += "</td>";

}

else{

//分隔符

htmlStr += "<td colspan=/"3/" height=/"5/"><hr class=/"bs_rm_sperator/"/></td>";

}

htmlStr += "</tr>";

return htmlStr;

}

//设置图片的背景色

this.setImgSelect = function(elmObj, flag){

if (this.img.Trim() != ""){

if (flag){

elmObj.cells[0].style.backgroundColor = "#8989bc";

}

else{

elmObj.cells[0].style.backgroundColor = "";

}

//展现下一级菜单

this.showChildren = function (elmObj){

var pobj = eval(this.pid);

pobj.hiddenAll(this.level+1);

if (this.childList.length > 0 && !this.disabled){

var htmlStr = "<table border='0' cellspacing='0'>";

for (var i=0; i<this.childList.length; i++){

htmlStr += pobj.itemAreaList[this.areaIndex].itemList[this.childList[i]].show();

}

htmlStr += "</table>";

var thisDiv = document.getElementById(this.pid+"_rm_"+(this.level));

var left = document.body.scrollLeft+thisDiv.offsetLeft+thisDiv.offsetWidth-4;

var top = thisDiv.offsetTop+elmObj.offsetTop+1;

var levelObj = null;

levelObj = document.getElementById(this.pid+"_rm_"+(this.level+1));

//level+1层没有创建

if (levelObj == null){

levelObj = document.createElement("div");

levelObj.id = this.pid+"_rm_"+(this.level+1);

levelObj.className = "bs_rm_div";

document.body.appendChild(levelObj);

}

levelObj.innerHTML = htmlStr;

levelObj.style.display = "block";

//定位

if((left+levelObj.offsetWidth) > document.body.scrollLeft+document.body.clientWidth){

left -= (elmObj.offsetWidth + levelObj.offsetWidth-4);

}

window.status = ("top:"+top+ " thisDiv.offsetHeight:"+thisDiv.offsetHeight+" levelObj.offsetWidth:"+levelObj.offsetHeight+ " all:" + (top+levelObj.offsetHeight) +" max:"+(document.body.scrollLeft+document.body.clientHeight));

if((top+levelObj.offsetHeight) > document.body.scrollTop+document.body.clientHeight){

top -= (levelObj.offsetHeight-elmObj.offsetHeight);

}

levelObj.style.left = left;

levelObj.style.top = top;

this.childIsShow = true;

}

//鼠标按下动作

this.doOnmousedown = function(elmObj){

window.event.cancelBubble=true;

if (this.childList.length <= 0){

elmObj.setCapture();

}

return false;

}

//鼠标弹起动作

this.doOnmouseup = function(elmObj){

window.event.cancelBubble=true;

if (this.childList.length <= 0){

var pobj = eval(this.pid);

pobj.setRMIndex(this.areaIndex, this.index);

elmObj.releaseCapture();

pobj.hiddenAll(0);

if (this.jsfun.Trim() != ""){

eval(this.jsfun);

}

return false;

}

//鼠标移入动作

this.doOnmouseover = function(elmObj){

window.event.cancelBubble=true;

if (!this.isSperator){

elmObj.className = "bs_rm_over";

this.setImgSelect(elmObj, true);

}

//改变其他的项的高选

var pobj = eval(this.pid);

pobj.itemAreaList[this.areaIndex].setIndexItem(this.pIndex, this.index);

this.showChildren(elmObj);

return false;

}

//鼠标移出动作

this.doOnmouseout = function(elmObj){

window.event.cancelBubble=true;

if (!this.isSperator && !this.childIsShow

elmObj.className = "bs_rm_out";

this.setImgSelect(elmObj, false);

}

return false;

}