[tutorial] menu de contexto personalizado

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] menu de contexto personalizado

Post by Kodo no Kami » Fri Aug 12, 2016 6:21 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: Select all

<html>
<head>
</head>
<body>
</body>
</html>
com o html pronto criamos a tag javascript

Code: Select all

<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
criamos a tag style para o css

Code: Select all

<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: Select all

<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: Select all

<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: Select all

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

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

Code: Select all

<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: Select all

<script>
oncontextmenu = function(){
}
</script>
essa função é importante no final retornar false par desativar o menu de contexto

Code: Select all

<script>
oncontextmenu = function(){
    return false;
}
</script>
usamos o document.getElementById para acessar pelo id o nosso menu tambem atribuimos a uma variavel

Code: Select all

<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: Select all

<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: Select all

<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: Select all

<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: Select all

</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: Select all

<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: Select all

<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: Select all

<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: Select all

<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>
Image

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

Code: Select all

<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: Select all

<body onclick="kodosumiu()">
<div id="kodocontexto">
<div id="kodoalerta" onclick="kodoAlerta()">alerta</div>
<div id="kodogoogle" onclick="kodoGoogle()">google</div>
</div>
</body>
Image

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

by kodo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”