JS实现XP风格右键菜单的使用指南

右键菜单使用说明

使用说明：

使用前，需先创建菜单对象实例。

var obj = new MouseMenu("obj");

注意，变量名 obj 必须与 MouseMenu("obj") 中的参数保持一致。

若成功创建 obj，则该对象将具备以下方法，且初始状态下 obj.length = 0。

核心方法详解

方法说明：

1. addMenu(express[,icon][,url][,target][,title]);

功能：插入一个菜单项，并返回一个与上述 obj 功能相同的菜单对象。

此时 obj[obj.length] 将被赋值，随后 obj.length 自动加 1。

参数说明：

express 为必填项，字符串类型，用于显示在菜单上的文本内容。

icon 为可选项，整数类型（大于0）。若后续有子菜单且不需要图标，可填写 ""。

url 为可选项，字符串类型，指定链接路径。

target 为可选项，字符串类型，指定链接打开的目标窗口属性。

title 为可选项，字符串类型，指定鼠标悬停时的提示文本。

2. addLink(express,[,icon][,url][,target][,title])

功能：插入一个普通链接，随后 obj.length 自动加 1。

参数说明：

express 为必填项，字符串类型，显示在菜单上的文本。

icon 为可选项，整数类型（大于0）。若不需要图标，可填写 ""。

url 为必填项，字符串类型，指定链接路径。

target 为可选项，字符串类型，指定链接打开的目标窗口属性。

title 为可选项，字符串类型，指定鼠标悬停时的提示文本。

3. addHR()

功能：在菜单中插入一条分割线。

参数说明：

该方法不属于 link 或 menu 对象，因此调用时 obj.length 保持不变。

示例：

var MM = new MouseMenu("MM")

MM.addLink("连接","","http://hello.com")

MM.addHR()

MM.addMenu("菜单")

// 注意：MM[1] 指向的是第二个菜单项，而非 MM[2]，因为 MM.addHR() 不会增加 length

MM[1].addLink("连接","","http://hello.com")

经过上述说明，相信您已经掌握了基本用法。

若有疑问：“在哪里插入连接……”

…… 嗯~ 这个 ^_^! 参考上面的示例代码吧~~~~

全局配置与附加数据

附加：代码中的其他全局数据配置

//--------------- 有关数据 -----------------//

var IconList = new Array(); // icon图片集合，下标从 1 开始

IconList[1] = new Image();

IconList[1].src = "icon/sub.gif";

//--------------------------- 声音开关 ------ 声音开关 ------------------//

var mouseCanSound = true;

var menuSpeed = 50; //---------- 菜单显示速度 ------------//

var alphaStep = 30; //---------- Alpha 透明度变化步长 -----------//

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|www.jb51.net|---XP风格的右键菜单</title> <STYLE>.menutable {     BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100 } .menutrin {     BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand } .menutrout {     COLOR: #000000; CURSOR: hand } .menutd0 {     HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改变这个修改菜单高度--->:  } .menutd1 {     FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px } .linktd1 {     WIDTH: 46px } .menutd2 {     WIDTH: 4px } .menuhr {     BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset } </STYLE> <BGSOUND id=theBS loop=0 src=""></HEAD> <BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt">   <P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false;  就可以了</P></BODY></HTML>