|
Como criar um menu de contexto ao clicar com o botão direito do mouse:
Tente clicar com o botão direito.
document.oncontextmenu =criar_menu_contexto;
document.body.onmousedown = function (){remover_menu_contexto();}
function criar_menu_contexto(e){
var links = new Array(
{"nome":"teste1","link":"#link1"},
{"nome":"teste2","link":"#link2"},
{"nome":"teste3","link":"#link3"},
{"nome":"teste4","link":"#link4"},
{"nome":"teste5","link":"#link5"},
{"nome":"teste6","link":"#link6"}
)
//excluir o menu de contexto caso já tenha sido criado
remover_menu_contexto();
//pegar as coordenadas do mouse
var x = pega_coordenadas_x(e);
var y = pega_coordenadas_y(e);
//criar o menu de contexto
var menu = document.createElement("div");
var ul = document.createElement("ul");
for(i=0;i<links.length;i++){
var li = document.createElement("li");
var link = document.createElement("a");
var nome = document.createTextNode(links[i].nome);
link.href=links[i].link;
link.appendChild(nome);
li.appendChild(link);
ul.appendChild(li);
}
menu.appendChild(ul);
menu.style.cssText = "position:absolute; top:"+y+"px; left:"+x+"px; background-color:#FFFFCC; border:1px solid #CCCCCC; padding:5px;";
menu.id="menu_de_contexto";
document.body.appendChild(menu);
return false;
}
function remover_menu_contexto(){
if (menu = document.getElementById("menu_de_contexto"))
document.body.removeChild(menu);
}
function pega_coordenadas_x(e){
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
return (posx);
}
function pega_coordenadas_y(e){
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
return (posy);
}
|
