Pages: [1]   Go Down
Author Topic: [tutorial] menu de contexto personalizado  (Read 2437 times)
kodo no kami
RegMem
*

Karma: +0/-0
Offline Offline

Posts: 44


« on: August 12, 2016, 05:58:14 PM »

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

Code:
<html>
<head>
</head>
<body>
</body>
</html>

com o html pronto criamos a tag javascript

Code:
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>

criamos a tag style para o css

Code:
<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

Code:
<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

Code:
<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

Code:
<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

Code:
<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

Code:
<script>
oncontextmenu = function(){
}
</script>

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

Code:
<script>
oncontextmenu = function(){
    return false;
}
</script>

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

Code:
<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

Code:
<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

Code:
<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

Code:
<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)

Code:
</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

Code:
<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

Code:
<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

Code:
<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

Code:
<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

Code:
<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

Code:
<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
Logged


Author Topic: [tutorial] menu de contexto personalizado(Read 2437 times)
Greatmulin
Member
*

Karma: +0/-0
Offline Offline

Posts: 2


« Reply #1 on: April 11, 2018, 06:26:20 AM »

I had a very good chance. I have found a site that provides useful information this good.
Logged


Author Topic: [tutorial] menu de contexto personalizado(Read 2437 times)
Vermontf
Member
*

Karma: +0/-0
Offline Offline

Posts: 2


« Reply #2 on: April 17, 2018, 02:29:34 AM »

Here are several to choose what to watch, then get to the latter as well.
Logged



Author Topic: [tutorial] menu de contexto personalizado(Read 2437 times)
Foxraed
Member
*

Karma: +0/-0
Offline Offline

Posts: 2


« Reply #3 on: June 06, 2018, 01:15:17 AM »

Merci pour le code.
Logged


Pages: [1]   Go Up
Print
Jump to: