//ContextMenu
var contextmenu = new ContextMenu(...{ container : document.getElementById('treemenu') });
contextmenu.push( ...{ html : 'Powered By: Jonllen', css : 'disabled'});
contextmenu.push( ...{ html : '', css : 'line'});
contextmenu.push( ...{ html : '刷新(<u>R</u>)', href : 'javascript:location.reload();'});
for(var i=0;i<menu.length;i++) ...{
contextmenu.push(...{
id : menu[i].id,
level : menu[i].level,
parentId : menu[i].parentId,
html : menu[i].name,
href : menu[i].url
});
}
contextmenu.render();
//原有回调函数
var contextmenuOnShow = contextmenu.onShow;
//设置新的回调函数
contextmenu.onShow = function (target, _this)...{
var item = target.treemenu || target.parentNode.treemenu;
if( item ) ...{
var html = '添加'+item.html+'“子节点'+(item.children.length+1)+'”';
_this.push( ...{
html : html,
click : function (e)...{
item.expand = false;
var newItem = ...{
id : item.id + '0'+ (item.children.length+1),
level : item.level + 1,
parentId : item.id,
html : item.html+'子节点'+(item.children.length+1),
href : '#',
css : 'item',
createExpand : true
};
item.children.push(newItem);
treemenu.list.push(newItem);
treemenu.renderChild(item);
},
clickClose : true,
index : 1,
type : 'dynamic'
});
_this.push( ...{
html : '删除节点“'+item.html+'”',
click : function (e)...{
if( confirm('是否确认删除节点“'+item.html+'”？'))
treemenu.remove(item);
},
clickClose : true,
index : 2,
type : 'dynamic'
});
}
contextmenuOnShow(target, _this);
};
那么"回调函数"如何来实现呢？其实很简单，就是函数运行到某一行代码时运行预先设置的"回调函数"，有点像事件机制，如同绑定多个window.onload事件，由于之前可能有绑定函数，所以先记录之前的函数，再设置新绑定的函数，之后再调用之前绑定的函数。上面的所示代码实现右击元素如果为treemenu节点，则在右键里添加添加和删除treemenu节点菜单，效果见后面节点树(TreeMenu)示例。
回调函数里我们需要注意作用域，this指针指向当前回调函数对象，而不是在运行回调函数的上下里，不过我们也可以使用call方法来把回调函数在当前this上下文里运行。我这里是采用给回调函数传递2个参数的办法，这样在回调函数就能很方便的获取this对象和其他变量，这个在Ajax的Callback回调函数里普遍使用。
自定义右键菜单(ContextMenu)只适合一些辅助功能的快捷操作，如有一些业务功能复杂的OA系统等，下面我也将会结合节点树(TreeMenu)进行使用。如果可以话尽量不要使用右键菜单，其一是需要培训用户右击操作的习惯，其二自定义右键菜单丢失掉了原有右键菜单的一些功能，如查看源文件等。
这里右键菜单区域。
右击我你可以看属性哦。
你也可以选择我再右击复制。
你能遮住我吗？
ContextMenu.js
复制代码 代码如下: