JavaScript右键菜单控件
代码下载:ContextMenu.zip
介绍
我在这里介绍一个JavaScript级联菜单控件，它是个跨浏览器的JavaScrpit类，除了Opera浏览器。Opera不提供 oncontextmenu 事件。
构造
级联菜单的JavaScript类的构造参数可以是一个对象参数的列表。
var Arguments = {
Base: _Base, // Base reference where Context Menu to be displayed.
Width: _Width, // Width of the Context Menu in integer.
FontColor: _FontColor, // Font Color of each Context Menu item.
HoverFontColor: _HoverFontColor, // Hover Font Color of each Context Menu item.
HoverBackgroundColor: _HoverBackgroundColor, // Hover Background Color
// of each Context Menu item.
HoverBorderColor: _HoverBorderColor, // Hover Border Color of each Context Menu item.
OnClickEventListener: _OnClickEventListener // Reference of the click event handler.
};
//Example:
var Arguments = {
Base: document.getElementById('div'),
Width: 200,
FontColor: black,
HoverFontColor: white,
HoverBackgroundColor: blue,
HoverBorderColor: orange,
OnClickEventListener: ClickEventHandler
};
你可以给每个属性赋值或为null。
var Arguments = {
Base: null, // Default Value: document.documentElement.
Width: null, // Default Value: 200.
FontColor: null, // Default Value: ‘black’.
HoverFontColor: null, // Default Value: ‘white’.
HoverBackgroundColor: null, // Default Value: '#2257D5'.
HoverBorderColor: null, // Default Value: ‘orange’.
OnClickEventListener: null //Default anonymous method.
};
方法
级联菜单控件有下面的公共方法：
- AddItem(ImagePath, ItemText, IsDisabled, CommandName) - 增加菜单项.
它有4个参数:- ImagePath: 菜单项的图片.
- ItemText: 菜单项的文字.
- IsDisabled: 决定菜单项是否显示.
- CommandName: 菜单项的命令名称.
- AddSeparatorItem(): 增加一个分割线.
- Display(e): 显示级联菜单.
- Hide(): 隐藏级联菜单.
- Dispose(): 销毁级联菜单.
- GetTotalItems(): 计算菜单项的个数包含分割线.
属性
它只有一个属性用来显示当前的版本号。
Version: 显示当前版本.
事件
- Click: 当用单击的时候被激活.
对于匿名事件使用下面的方法:
var EventHandlerName = function(Sender, EventArgs)
{
...
}
Sender 是引发单击事件的对象的引用。EventArgs包含了click事件的参数：
var EventArgs = {
CommandName: _CommandName, // Base Command name of the Item.
Text: _Text, // Item Text.
IsDisabled: _IsDisabled, // Indicate whether Item to be disabled or not.
ImageUrl: _ImageUrl // Path of the Item image.
};
注意：这里的Click事件的处理，类似与C#对事件处理的风格。
使用方法
在Web页面添加对ContextMenu.js的引用。
<script type="text/javascript" src="JS/ContextMenu.js"></script>
在web页面创建div。
<div id="div" style="width: 925px; height: 300px; background-color: silver;">
</div>
然后，在Head区域加入如下脚本:
<script type="text/javascript">
var oCustomContextMenu = null;
var oBase = null;
window.onload = function()
{
oBase = document.getElementById('div');
var Arguments = {
Base: oBase,
Width: 200,
FontColor: null,
HoverFontColor: null,
HoverBackgroundColor: null,
HoverBorderColor: null,
ClickEventListener: OnClick
};
oCustomContextMenu = new CustomContextMenu(Arguments);
oCustomContextMenu.AddItem('Images/ei0019-48.gif', 'Add', false, 'Add');
oCustomContextMenu.AddItem('Images/save.png', 'Save', true, 'Save');
oCustomContextMenu.AddSeparatorItem();
oCustomContextMenu.AddItem('Images/ei0020-48.gif', 'Update', false, 'Update');
oCustomContextMenu.AddSeparatorItem();
oCustomContextMenu.AddItem(null, 'Cancel', false, 'Cancel');
}
</script>
ClickEventListener: OnClick
然后使用匿名方法创建Click事件：
var OnClick = function(Sender, EventArgs)
{
//Code
…
oCustomContextMenu.Hide();
}
//Example:
var OnClick = function(Sender, EventArgs)
{
switch(EventArgs.CommandName)
{
case 'Add':
alert('Text: ' + EventArgs.Text);
alert('IsDisabled: ' + EventArgs.IsDisabled);
alert('ImageUrl: ' + EventArgs.ImageUrl);
break;
case 'Save':
alert('Text: ' + EventArgs.Text);
alert('IsDisabled: ' + EventArgs.IsDisabled);
alert('ImageUrl: ' + EventArgs.ImageUrl);
break;
case 'Update':
alert('Text: ' + EventArgs.Text);
alert('IsDisabled: ' + EventArgs.IsDisabled);
alert('ImageUrl: ' + EventArgs.ImageUrl);
break;
case 'Cancel':
alert('Text: ' + EventArgs.Text);
alert('IsDisabled: ' + EventArgs.IsDisabled);
alert('ImageUrl: ' + EventArgs.ImageUrl);
break;
}
oCustomContextMenu.Hide();
}
当你单击级联菜单的时候这个方法将被调用。不要忘记在事件处理最后调用 Hide 方法。
然后附加事件到之前创建的DIV标签上。
< … oncontextmenu="javascript:return oCustomContextMenu.Display(event);" … >
在windows.onunload事件调用Disponse方法来释放menu对象。
window.onunload = function(){ oCustomContextMenu.Dispose(); }
英文源文档 <http://www.codeproject.com/KB/scripting/Context_Menu.aspx>
