Skip to content

Instantly share code, notes, and snippets.

@valdiney

valdiney/gist:8682216

Last active January 4, 2016 21:39
Show Gist options
  • Save valdiney/8682216 to your computer and use it in GitHub Desktop.
Save valdiney/8682216 to your computer and use it in GitHub Desktop.
Download ZIP
TriggersAnAction_Script: 0.1 Script para ocultar e mostrar elementos em uma página. Interessante para apresentar ao usuário determinadas partes de um site.
Raw
gistfile1.js
///////////////////////////////////////////////////////
//
// Project: TriggersAnAction_Script
// author: Valdiney França
//
//////////////////////////////////////////////////////
/*
Conhecendo os parâmetros do método ( showAndClose ).
( area )= Área que desejamos apresentar e ocultar.
( button ) = não necessariamente um botão, pode ser qualquer elemento html que você queira que seja o disparador do evento.
( captionButtonAfter ) = Legenda que aparecerá dentro do elemento disparador antes do evento acontecer.
( captionButtonBefore ) = Legenda que aparecerá dentro do elemento disparador depois que o evento for executado.
( backgroundAfter ) = Cor interna do elemento disparador antes do evento acontecer.
( backgroundBefore ) = Cor interna do elemento disparador depois que o evento é executado.
*/
window.onload = function() {
function showAndCloseAreas() { /*...*/ }
showAndCloseAreas.prototype.showAndClose = function( area, button, captionButtonAfter, captionButtonBefore, backgroundAfter, backgroundBefore ) {
return button.onclick = function() {
if( area.style.display === 'none' ) {
area.style.display = 'block';
button.style.background = backgroundAfter || '';
button.innerHTML = captionButtonBefore || '';
}
else {
area.style.display = 'none';
button.style.background = backgroundBefore || '';
button.innerHTML = captionButtonAfter || '';
}
} // end actionButton...
} // end showAndCloseAreas..
/////////////////////////////////////////////////////////////////////////////////////////////////////
var button_area01 = document.getElementById('button_area01'),
area01 = document.getElementById('area01');
area01.style.display = 'none';
var novoEvento = new showAndCloseAreas();
novoEvento.showAndClose( area01, button_area01, 'Mostrar área', 'Fechar essa área X', '#975c5c', '#628daf' );
/////////////////////////////////////////////////////////////////////////////////////////////////////
} // end window...
Raw
gistfile2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/TriggersAnAction_Script"></script>
<title>Minha página</title>
<style>
#area01 {
width:800px;
height:300px;
padding:10px;
border:1px solid black;
background:silver;
border-radius:10px;
-webkit-transition-duration:0.5s;
}
button {
background:black;
color:white;
border:1px solid gray;
padding:10px;
cursor:pointer;
border-radius:10px;
font-family:cendara;
font-size:20px;
}
</style>
</head>
<body>
<button type="button" id="button_area01">Mostrar área</button>
<div id="area01"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment