Sign In
Create Account
1
criar spoiler em javascript/css Dom Abr 21, 2013 4:23 am
Moedas : 201
Mensagens : 92
Humor : *-*
Reputação : 5
hacker fts315
bom galera spoiler sao aqueles botoes para ocultar e desocultar parte da pagina muito encontrado em forum e blogs, veja um exemplo abaixo do spoiler do forum
se voce estiver vendo esse tutorial pelos foruns phpbb acredite nosso spoiler vai ficar mais bonitinho doq o anterior '-' , para começar vamos criar uma pagina html basica
agora vamos criar um botao vai ser por ele q agente vai ocultar e desocultar o spoiler, para isso agente usa tag input do tipo button
nao e necessario criar uma tabela, mais acho q isso deixa nosso spoiler com um visual melhor entao vamos la, para criar uma table usamos 3 tags q sao table, tr, td, na tag table agente usa o atributo border e o numero da bordar, dentro da tag table agente cria a tag tr e dentro dela agente cria a tag td nao se esquece de fechar as tags na ordem certa, agora agente coloca nosso botao la dentro da tag td
depois do fechamento da tag tr agente coloca mais um tr e td, ai dentro q agente vai colocar nosso conteudo
bom eu presumo q vc vai querer q seu spoiler ja fique oculto entao ai ja vai começar a parte css, no td do nosso conteudo agente coloca o atributo style="display:none" e um id para mais tarde agente poder alterar o valor pelo javascript
pronto agora so falta a parte javascript. para isso criamos uma tag script fora da tabela tambem usamos o atributo type="text/javascript" nela
criamos uma funçao la dentro q eu vou chamar de fts_spoiler, e no botao agente criar um atributo chamado onclick e colocamos nossa funçao la tambem
so tem um botao entao vai ser por ele q agente vai ocultar e desocultar para isso agente tem q fazer uma checagem para ver oq ele tem q fazer, usamos a condiçao if dentro dela pegamos o valor do atributo do style mais como vamos fazer isso '-' , usamos o document.getElementById para pegar o id no meu caso o id e conteudo, logo em seguido o atributo .style.display e comparamos com none
dentro da condiçao if agente pega o atributo .style.display so q agora atribuimos block a ele
pronto agora falta ocultar o conteudo denovo para isso usamos a condiçao else e dentro dela no atributo .style.display atribuimos none a ele
bom galera e isso ^^
by hacker fts315
- Spoiler:
- isso tava escondido
se voce estiver vendo esse tutorial pelos foruns phpbb acredite nosso spoiler vai ficar mais bonitinho doq o anterior '-' , para começar vamos criar uma pagina html basica
- Código:
<html>
<body>
</body>
</html>
agora vamos criar um botao vai ser por ele q agente vai ocultar e desocultar o spoiler, para isso agente usa tag input do tipo button
- Código:
<html>
<body>
<input type="button" value="spoiler">
</body>
</html>
nao e necessario criar uma tabela, mais acho q isso deixa nosso spoiler com um visual melhor entao vamos la, para criar uma table usamos 3 tags q sao table, tr, td, na tag table agente usa o atributo border e o numero da bordar, dentro da tag table agente cria a tag tr e dentro dela agente cria a tag td nao se esquece de fechar as tags na ordem certa, agora agente coloca nosso botao la dentro da tag td
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler">
</td>
</tr>
</table>
</body>
</html>
depois do fechamento da tag tr agente coloca mais um tr e td, ai dentro q agente vai colocar nosso conteudo
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler">
</td>
</tr>
<tr>
<td>
by hacker fts315
</td>
</tr>
</table>
</body>
</html>
bom eu presumo q vc vai querer q seu spoiler ja fique oculto entao ai ja vai começar a parte css, no td do nosso conteudo agente coloca o atributo style="display:none" e um id para mais tarde agente poder alterar o valor pelo javascript
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
</body>
</html>
pronto agora so falta a parte javascript. para isso criamos uma tag script fora da tabela tambem usamos o atributo type="text/javascript" nela
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
<script type="text/javascript">
</script>
</body>
</html>
criamos uma funçao la dentro q eu vou chamar de fts_spoiler, e no botao agente criar um atributo chamado onclick e colocamos nossa funçao la tambem
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler" onclick="fts_spoiler()">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
<script type="text/javascript">
function fts_spoiler()
{
}
</script>
</body>
</html>
so tem um botao entao vai ser por ele q agente vai ocultar e desocultar para isso agente tem q fazer uma checagem para ver oq ele tem q fazer, usamos a condiçao if dentro dela pegamos o valor do atributo do style mais como vamos fazer isso '-' , usamos o document.getElementById para pegar o id no meu caso o id e conteudo, logo em seguido o atributo .style.display e comparamos com none
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler" onclick="fts_spoiler()">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
<script type="text/javascript">
function fts_spoiler()
{
if(document.getElementById("conteudo").style.display == 'none')
{
}
}
</script>
</body>
</html>
dentro da condiçao if agente pega o atributo .style.display so q agora atribuimos block a ele
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler" onclick="fts_spoiler()">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
<script type="text/javascript">
function fts_spoiler()
{
if(document.getElementById("conteudo").style.display == 'none')
{
document.getElementById("conteudo").style.display = 'block';
}
}
</script>
</body>
</html>
pronto agora falta ocultar o conteudo denovo para isso usamos a condiçao else e dentro dela no atributo .style.display atribuimos none a ele
- Código:
<html>
<body>
<table border="1">
<tr>
<td>
<input type="button" value="spoiler" onclick="fts_spoiler()">
</td>
</tr>
<tr style="display:none" id="conteudo">
<td>
by hacker fts315
</td>
</tr>
</table>
<script type="text/javascript">
function fts_spoiler()
{
if(document.getElementById("conteudo").style.display == 'none')
{
document.getElementById("conteudo").style.display = 'block';
}
else
{
document.getElementById("conteudo").style.display = 'none';
}
}
</script>
</body>
</html>
bom galera e isso ^^
by hacker fts315
Idade
Sex Jan 22, 2016 12:33 am por 
