JavaScript context menu (1)

Effect:

There are many ways to implement the right-click menu in javascript, and their ideas are also different. Before introducing the Code, let's briefly introduce my right-click object ideas.

1. A right-click object contains multiple right-click blocks.

2. Any page or control can have at most one right-click block mounted.

3. Each right-click block has multiple levels of right-click items.

4. Use pupop.

The source code is introduced as follows:

Public part:

/**
* <P> title: BinaryStar right-click menu JS Model </p>
* <P> Function Description: simulates the context menu function. </P>
* <P> Implementation Method: A context menu object consists of multiple context menu blocks. Each object that requires the right-click function is directly associated with a menu block,
* A menu block can be associated with multiple objects.
* Each menu block contains multiple menu items. Each menu item may contain multiple sub-menu items.
* <P> author: BinaryStar original B/S framework </p>
* <P> version 0.1 </p>
* <P> creation date: 2005-12-21 </p>
*/

/**
* <P> title: BSRightItemArea </p>
* <P> Function Description: Right-click the menu block. </P>
* <P> author: BinaryStar original B/S framework </p>
* <P> version 0.1 </p>
* <P> creation date: 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 production"; // text displayed on the left
This. itemList = new Array (); // context menu set
This. thisItemIndex =-1;
This. mouseType = 2; // specifies the mouse mode to be triggered. The default value is right-click.
This. preShowFun = ""; // specifies the method to attach the right-click block.

// Add a right-click Root menu item
This. addRootItem = function (text, jsfun, img, disabled )...{
Return this. addItem (-1, text, jsfun, img, disabled );
}

// Add a shortcut menu item
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;
}
// Set the Child Project of the parent node
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;
}

// Display menu item Blocks
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 = '000000' 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;
}

// Set the selected menu item
This. setIndexItem = function (level, thisIndex )...{
Var isSelf = false;
Var pobj = eval (this. pid );
Var thisLevelItem =-1;
Var selectObj = pobj.popuplist[level;.doc ument. 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;.doc ument. 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;
}
}

This article from the CSDN blog, reproduced please indicate the source: http://blog.csdn.net/mynickel2000/archive/2006/09/12/1214608.aspx