criar spoiler em javascript/css

Ir em baixo

criar spoiler em javascript/css

Mensagem por Flavio315 em 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

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






Olá Caro usuario, olhe essas Dicas Importantes:
Respeite as [Você precisa estar registrado e conectado para ver este link.].
- [Você precisa estar registrado e conectado para ver este link.].
Fique atento a o [Você precisa estar registrado e conectado para ver este link.].
Veja os [Você precisa estar registrado e conectado para ver este link.] do fórum.
Não peça suporte por MP ou no Chat-Box.
avatar
Flavio315
Moderapixel

Quebra de regras Quebra de regras :
0 / 1000 / 100

Masculino Mensagens Mensagens : 54
Pontos Pontos : 146
Reputação Reputação : 0
Data de inscrição Data de inscrição : 19/06/2013
Localização : sub-mundo da informatica

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: criar spoiler em javascript/css

Mensagem por Cʀɑzy em 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:
Código:
jQuery(document).ready(function(){
jQuery(".spoiler_content").hide();
jQuery(".spoiler").click(function(){
jQuery(".spoiler_content").show();
});

});
avatar
Cʀɑzy
Admin
Admin

Quebra de regras Quebra de regras :
0 / 1000 / 100

Masculino Mensagens Mensagens : 16
Pontos Pontos : 27
Reputação Reputação : 3
Data de inscrição Data de inscrição : 17/06/2013
Localização : .

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: criar spoiler em javascript/css

Mensagem por Flavio315 em 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






Olá Caro usuario, olhe essas Dicas Importantes:
Respeite as [Você precisa estar registrado e conectado para ver este link.].
- [Você precisa estar registrado e conectado para ver este link.].
Fique atento a o [Você precisa estar registrado e conectado para ver este link.].
Veja os [Você precisa estar registrado e conectado para ver este link.] do fórum.
Não peça suporte por MP ou no Chat-Box.
avatar
Flavio315
Moderapixel

Quebra de regras Quebra de regras :
0 / 1000 / 100

Masculino Mensagens Mensagens : 54
Pontos Pontos : 146
Reputação Reputação : 0
Data de inscrição Data de inscrição : 19/06/2013
Localização : sub-mundo da informatica

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: criar spoiler em javascript/css

Mensagem por Detoxx em Sex Jun 21, 2013 3:44 pm

Obrigado Por Compartilhar Com o Fórum
Att






Olá Caro usuario, olhe essas Dicas Importantes:
Respeite as [Você precisa estar registrado e conectado para ver este link.].
- [Você precisa estar registrado e conectado para ver este link.].
Fique atento a o [Você precisa estar registrado e conectado para ver este link.].
Veja os [Você precisa estar registrado e conectado para ver este link.] do fórum.
Não peça suporte por MP ou no Chat-Box.
avatar
Detoxx
Moderapixel

Quebra de regras Quebra de regras :
0 / 1000 / 100

Masculino Mensagens Mensagens : 76
Pontos Pontos : 86
Reputação Reputação : 0
Data de inscrição Data de inscrição : 19/06/2013
Idade Idade : 17
Localização : Aracaju

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: criar spoiler em javascript/css

Mensagem por Cʀɑzy em Sex Jun 21, 2013 5:53 pm

kkkkkk de boa ú.ú,

depois vou fazer um tutorial mais fácil pra criar spoiler '-'
avatar
Cʀɑzy
Admin
Admin

Quebra de regras Quebra de regras :
0 / 1000 / 100

Masculino Mensagens Mensagens : 16
Pontos Pontos : 27
Reputação Reputação : 3
Data de inscrição Data de inscrição : 17/06/2013
Localização : .

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: criar spoiler em javascript/css

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum