JavaScript實現右鍵菜單（一）

效果：

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 = "";//激發右鍵塊前的附加方法

  //添加一個右鍵根菜項
  this.addRootItem = function (text, jsfun, img, disabled)...{
    return this.addItem(-1, text, jsfun, img, disabled);
  }

  //添加一個右鍵菜項
  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);
    if (text.Trim() == "-" || text.Trim() == "" || text.Trim() == "sperator")...{
      newItem.isSperator = true;
    }
    //設定父節點的子項目
    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;
  }

  //功能表項目塊的展現
  this.show = function()...{
    var htmlStr = "<table border='0' cellspacing='0'>";
    htmlStr += "<tr><td valign="top"  bgcolor="#000000" onclick="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'>";
    for (var i=0; i<this.itemList.length; i++)...{
      if (this.itemList[i].pIndex < 0)...{
        htmlStr += this.itemList[i].show();
      }
    }
    htmlStr += "</table></td></tr></table>";
    return htmlStr;
  }

  //設定選中的功能表項目
  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");
    if (selectObj != null)...{
     thisLevelItem = selectObj.value;
    if (thisIndex == thisLevelItem && thisLevelItem>=0)...{
     if (this.itemList[thisIndex].childList.length > 0)...{
     this.itemList[thisIndex].childIsShow = true;
     }
     isSelf = true;
    }
    else if (thisLevelItem >= 0)...{
       var thisDiv = pobj.popupList[level].document.getElementById(this.itemList[thisLevelItem].id+"_tr");
       if (thisDiv != null)...{
         this.itemList[thisLevelItem].setImgSelect(thisDiv, false);
     this.itemList[thisLevelItem].childIsShow = false;
      }
    }
    selectObj.value = thisIndex;
     this.thisItemIndex = thisIndex;
    }
    return isSelf;
  }
}

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/mynickel2000/archive/2006/09/12/1214608.aspx