Início
Procurar
Registar
Entrarcriar spoiler em javascript/css
3 participantes
Página 1 de 1
criar spoiler em javascript/css
por Flavio315 Sex Jun 21, 2013 3:25 pm
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
Flavio315- Moderapixel
Quebra de regras : 
Mensagens : 54
Pontos : 146
Reputação : 0
Data de inscrição : 19/06/2013
Localização : sub-mundo da informatica
Re: criar spoiler em javascript/css
por Cʀɑzy Sex Jun 21, 2013 3:36 pm
Olá!
Nossa, que tenso, pra que isso tudo -,- e só digitar uma input e fazer um jQuery -,-
jQuery:
Nossa, que tenso, pra que isso tudo -,- e só digitar uma input e fazer um jQuery -,-
jQuery:
- Código:
jQuery(document).ready(function(){
jQuery(".spoiler_content").hide();
jQuery(".spoiler").click(function(){
jQuery(".spoiler_content").show();
});
});
Cʀɑzy- Admin
- Quebra de regras :
Mensagens : 16 Pontos : 27 Reputação : 3 Data de inscrição : 17/06/2013
Localização : .
Re: criar spoiler em javascript/css
por Flavio315 Sex Jun 21, 2013 3:41 pm
Cʀɑzy escreveu:Olá!
Nossa, que tenso, pra que isso tudo -,- e só digitar uma input e fazer um jQuery -,-
jQuery:
- Código:
jQuery(document).ready(function(){
jQuery(".spoiler_content").hide();
jQuery(".spoiler").click(function(){
jQuery(".spoiler_content").show();
});
});
tipo eu so fui aprender jquery 1 ano depois desse tutorial entao tive q fazer tudo isso kkkkkkkkkk
Flavio315- Moderapixel
- Quebra de regras :
Mensagens : 54 Pontos : 146 Reputação : 0 Data de inscrição : 19/06/2013
Localização : sub-mundo da informatica
Re: criar spoiler em javascript/css
por Detoxx Sex Jun 21, 2013 3:44 pm
Obrigado Por Compartilhar Com o Fórum
Att
Att
Detoxx- Moderapixel
- Quebra de regras :
Mensagens : 76 Pontos : 86 Reputação : 0 Data de inscrição : 19/06/2013
Idade : 23
Localização : Aracaju
Re: criar spoiler em javascript/css
por Cʀɑzy Sex Jun 21, 2013 5:53 pm
kkkkkk de boa ú.ú,
depois vou fazer um tutorial mais fácil pra criar spoiler '-'
depois vou fazer um tutorial mais fácil pra criar spoiler '-'
Cʀɑzy- Admin
- Quebra de regras :
Mensagens : 16 Pontos : 27 Reputação : 3 Data de inscrição : 17/06/2013
Localização : .
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|