Vilarejo PK2P
Bem-vindo ao fórum Vilarejo PK2P! O fórum oficial do canal Press Key to Play do Youtube!

Grupo para reunir as pessoas que acompanham os vídeos no canal Press Key to Play e discutir os assuntos abrangidos pelo Blog PK2P.


Você não está conectado. Conecte-se ou registre-se

[tutorial] menu de contexto personalizado

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

e ae galera hoje vamos aprender a criar um menu de contexto personalizado via javascript no caso os menus de contextos são esses que a gente aperta o botao direito do mouse. para a gente começar criamos um codigo basico em html

Código:
<html>
<head>
</head>
<body>
</body>
</html>

com o html pronto criamos a tag javascript

Código:
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>

criamos a tag style para o css

Código:
<html>
<head>
<style>
</style
<script>
</script>
</head>
<body>
</body>
</html>

agora criamos uma tag div dentro do body ja que ela que vai ser o menu de contexto, colocamos um id nela tambem (nao vou motrar o codigo html toda apenas a parte referente que estamos trabalhando

Código:

<body>
<div id="kodocontexto">
</div>
</body>

dentro do div criamos outros divs que sera a opção quando a pessoa clicar, no meu caso vai ter duas opçoes sendo ela alerta e a outra google

Código:
<body>
<div id="kodocontexto">
<div id="kodoalerta">alerta</div>
<div id="kodogoogle">google</div>
</div>
</body>

agora vamos mexer um pouco na estetica, meu menu de contexto vai ser 200x150, vai ter uma borda vermelha, vai ter uma imagem de fundo da yami, o texto centralizado e ja vou colocar ele em uma posição absoluta para nao interferir com o codigo entao o css ficaria assim

Código:

<style>
 #kodocontexto{
 width: 200px;
 height: 150px;
 text-align: center;
 border: solid red;
 background-image: url("yami.png");
 background-repeat: round;
 position: absolute;
 }
</style>



agora vamos ocultar o menu ali usando o css com display none

Código:
<style>
 #kodocontexto{
 width: 200px;
 height: 150px;
 text-align: center;
 border: solid red;
 background-image: url("yami.png");
 background-repeat: round;
 position: absolute;
 display: none;
 }
</style>

vamos colocar o evento oncontextmenu no javascript e atribuir uma uma função para ele

Código:
<script>
oncontextmenu = function(){
}
</script>

essa função é importante no final retornar false par desativar o menu de contexto

Código:
<script>
oncontextmenu = function(){
    return false;
}
</script>

usamos o document.getElementById para acessar pelo id o nosso menu tambem atribuimos a uma variavel

Código:
<script>
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    return false;
}
</script>

agora pela variavel a gente muda o css display para block usando o javascript com isso quando apertar o botao direito BUUUM vai aparecer o nosso menu

Código:
<script>
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}
</script>

agora criamos uma segunda função que vou chamar de kodosumiu

Código:
<script>
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}

function kodosumiu(){
}
</script>

nessa nova função usamos o document.getElementById tambem (eu sei que dava para deixar a variavel global mais to com preguiça de alterar o tutorial), porem dessa vez a gente coloca o display como none

Código:
<script>
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}
</script>

e chamamos essa função no evento onclick do body, entao quando a gente clicar com o botao direito vai aparecer o menu quando a gente clicar com o esquerdo vai sumir (daria para fazer algo mais complexo como verificar se esta clicando dentro do menu ou fora dele porem isso é so um exemplo basico)

Código:
</head>
<body onclick="kodosumiu()">
<div id="kodocontexto">

os menus de contexto aparece perto da onde a gente clica e o nosso nao entao vamos codar isso, primeiro criamos duas variveis globais no js ou seja fora das funçoes que vou chamar de kodoX e kodoY

Código:

<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}
</script>

agora usamos outro evento que é o onmousemove para a gente pegar a posição do mouse, tambem colocamos uma variavel nessa função para a gente pegar a posição

Código:

<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}

onmousemove = function(e){
}
</script>

agora atribuimos os atributos x e y daquela variavel para aquela variavel global

Código:

<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}

onmousemove = function(e){
    kodoX = e.x;
    kodoY = e.y;
}
</script>

dentro da função que aparece o menu de contexto no caso o evento oncontextmenu a gente atribui as variaveis globais para o css sendo ele o left e o top

Código:

<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    kodomenu.style.left = kodoX + "px";
    kodomenu.style.top = kodoY + "px";  
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}

onmousemove = function(e){
    kodoX = e.x;
    kodoY = e.y;
}
</script>



agora criamos uma função para cada botao no meu caso duas e adicionamos as funcionalidade que desejamos nelas

Código:

<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "block";
    kodomenu.style.left = kodoX + "px";
    kodomenu.style.top = kodoY + "px";  
    return false;
}

function kodosumiu(){
    kodomenu = document.getElementById("kodocontexto");
    kodomenu.style.display = "none";
}

onmousemove = function(e){
    kodoX = e.x;
    kodoY = e.y;
}

function kodoAlerta(){
   alert("tutorial by kodo no kami")
}

function kodoGoogle(){
    document.location = "https://www.google.com.br";
}
</script>

depois adicionamos as funçoes nos eventos onclick nas tags

Código:
<body onclick="kodosumiu()">
<div id="kodocontexto">
<div id="kodoalerta" onclick="kodoAlerta()">alerta</div>
<div id="kodogoogle" onclick="kodoGoogle()">google</div>
</div>
</body>



entao galera esta pronto o nosso menu de contexto personalizado ^^

by kodo no kami

Ver perfil do usuário https://eofclub.in/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum