清单 4. 上下文菜单
iconHolder.oncontextmenu = function(ev){
if(ev.currentTarget.firstChild){
openAppContextMenu(ev.currentTarget.firstChild.id, ev);
ev.stopPropagation();
}
return false;
};
利用相应应用程序的 id,可以获取对应应用程序的脚本,并执行,同时在系统日志中记录下相应的操作。
清单 5. 程序打开
function openApp(appId){
var time = new Date().getTime();
var action = "open app";
var details = "open: " + appId;
addHistory(time, action, details);// 记录系统日志
var appScript = getAppScript(appId);// 获取应用程序脚本
eval(appScript);// 执行应用程序
}
清单 6. 打开程序上下文菜单
function openAppContextMenu(appId, ev){
var appContextMenu = document.getElementById("appContextMenu");
appContextMenu.style.display="block";// 令上下文菜单可见
appContextMenu.style.pixelTop=ev.clientY;// 设置上下文菜单位置
appContextMenu.style.pixelLeft=ev.clientX;
appContextMenu.style.background = "#eee";
appContextMenu.style.color = "black";
appContextMenu.style.fontSize = "30";
appContextMenu.style.width = "200px";
appContextMenu.style.height = "220px";
appContextMenu.style.opacity = 0.5;// 令上下文菜单透明度为 50%
appContextMenu.innerHTML = "";
// 获取应用程序相应上下文菜单的内容
var apps = getApps();
for(var i=0; i<apps.length; i++){
if(apps[i].appId == appId){
for(var j=0; j<apps[i].contextMenu.length; j++){
appContextMenu.innerHTML += "<div class='appContextMenuItem'
onclick=\"appContextMenu.style.display='none';" +
apps[i].contextMenu[j].action + "\"
onmouseover='this.style.background=\"darkblue\"'
onmouseout='this.style.background=\"#eee\"'>"
+apps[i].contextMenu[j].name+"</div>";
}
break;
}
}
}
应用程序的上下文菜单由名为 appContextMenu 的 div 实现,将 oncontextmenu 事件中的 clientX 及 clientY 作为上下文菜单
出现的位置,并将其透明度设置为 0.5。利用相应应用程序的 id 获取上下文菜单对应的内容,并将其填充至上下文菜单。
图 2 显示了应用程序上下文菜单打开时的效果。
图 2. 应用程序上下文菜单