自定义右键菜单(ContextMenu)和悬浮层树(Tree)其实现上都大同小异，都是在脚本里动态添加节点，然后在生成一个绝对定位层，只不过右键菜单树(ContextMenu)触发的事件不一样。另外右键菜单还需要提供一个动态添加菜单项功能，以实现右击不同的元素可以显示不同的右键菜单，我这里提供一种"回调函数"，使用见如下代码：
//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);
};