Ir para conteúdo
Fórum Script Brasil
  • 0

Menu de contexto

David's Eclipse

Perguntado por David's Eclipse,

 Share

Pergunta

David's Eclipse

David's Eclipse

Postado
Postado

Alguém poderia me ajudar na elaboração de um menu de contexto (aquele ativado com o botão direito do mouse) válido para o Internet Explorer, Fire Fox, Google Chrome, Opera e Safari?

Encontrei alguns aqui no fórum, mas não funcionaram por dois motivos: 1º. Só "funcionavam" no IE; 2º. Mesmo no IE, apresentava um problema: Quando a página era rolada, o menu não acompanhava. Isto é, ao clicar com o botão direito do mouse o menu era chamado (normalmente), mas ao rolar a página e clicar novamente com o botão direito, o menu continuava a ser exibido no topo da página.

Por favor, agradeço se puderem me ajudar.

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
David's Eclipse

David's Eclipse

Postado
  • Autor
Postado
Tente utilizar o evento oncontextmenu, mas não tenho certeza se funciona no IE.

Olá, Jonathan! Obrigado por responder!

Encontrei o que preciso neste site: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

Mas estou com um problema: Preciso inserir este código em uma página com linguagem XML. Sendo assim, a linguagem do código é incompatível.

Há alguma forma de formatar o código em um documento .JS (contextmenu.js, por exemplo) para que eu possa posta-lo no Google Code (ou semelhante) e então chama-lo através de 

<script type="text/javascript" src=".../contextmenu.js">

?

Link para o comentário
Compartilhar em outros sites
  • 0
David's Eclipse

David's Eclipse

Postado
  • Autor
Postado (editado)
Ocorre algum erro ?

Sim, Jonathan. Para que a linguagem XML aceite o javascript, é necessário várias adaptações. Sendo que ao final, após as adaptações, o código deixa de funcionar.

Então eu gostaria de formatar o código abaixo em um documento .JS.

<head>
<style>
<!--

/* Context menu Script- © Dynamic Drive (www.dynamicdrive.com) Last updated: 01/08/22
For full source code and Terms Of Use, visit http://www.dynamicdrive.com */

.skin0{
position:absolute;
width:165px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}

.menuitems{
padding-left:10px;
padding-right:10px;
}
-->
</style>
</head>
<body>
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
<div class="menuitems" url="http://dynamicdrive.com">Dynamicdrive.com</div>
<div class="menuitems" url="http://dynamicdrive.com/new.htm" target="newwin">What's New?</div>
<div class="menuitems" url="http://dynamicdrive.com/hot.htm">What's Hot?</div>
<div class="menuitems" url="http://wsabstract.com/cgi-bin/Ultimate.cgi">Message Forum</div>
<div class="menuitems" url="http://dynamicdrive.com/faqs.htm">FAQs</div>
<div class="menuitems" url="http://dynamicdrive.com/submitscript.htm">Submit</div>
<hr>
<div class="menuitems" url="mailto:dynamicdrive@yahoo.com">Email Us</div>
</div>

&lt;script language="JavaScript1.2">

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")

function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

menuobj.style.visibility="visible"
return false
}

function hidemenuie5(e){
menuobj.style.visibility="hidden"
}

function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}

function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}

</script>
</body>

Corrija-me se eu estiver errado, mas penso que seria possível formatar o javascript do código acima em um documento .JS para ser chamado pela página através de SRC="...contextmeu.js", sem haver a necessidade de alterar o restante do código.

Desde já agradeço a sua ajuda!

Editado por David's Eclipse
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...